min-height : 100vh not working in ie8

Question

In IE8 when i give min-height in vh then ie8 ignore it and not work.in other brower work well.some where i read that vh not support ie8 any solution that i use vh in ie8.

 <div class=" item Finish " id="Finish" style="overflow: visible!important;" >
        <div  style="background-color:  #27AE61!important;padding: 0px !important;min-height:85vh;overflow: visible!important;">

       <-- html code  -->                      
        </div>
 </div>

Answer 1

vw and vh units are supported by IE 9 and up.

Try this:

    (function( $, window ){

  var $win = $(window)
      , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/\d+/)[0] / 100,
      unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent + 'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this,
        update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update );
    return update();
  };

}( jQuery, window ));

$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

Working demo: http://jsbin.com/izosuy/1/edit?js,output

Works well in IE8 as well!

Read this topic for more info: Is there any cross-browser javascript for making vh and vw units work

Answer 2

Silver Ringvee's answer is absolutely correct, except that default jQuery .css() functionality is broken when you want to do stuff like .css('margin-right') to get the right margin of an element. I found this issue when using fancyBox. I fixed that by checking if props is a string, if so parseProps($.extend({}, props)) is not used. I also added a check if multiple arguments were given, to support css('margin-right', '12px'). Here's my code:

(function ($, window) {
    var $win = $(window), _css = $.fn.css;

    function viewportToPixel(val) {
        var vwh_match = val.match(/[vwh]+/);
        var digits_match = val.match(/\d+/);
        if (vwh_match && vwh_match.length && digits_match && digits_match.length) {
            return (vwh_match[0] == 'vh' ? $win.height() : $win.width()) * (digits_match[0] / 100) + 'px';
        }
        return val;
    }

    function parseProps(props) {
        var p, prop;
        for (p in props) {
            prop = props[p];
            if (/[vwh]$/.test(prop)) {
                props[p] = viewportToPixel(prop);
            }
        }
        return props;
    }

    $.fn.css = function (props) {
        var self = this,
            originalArguments = arguments,
            update = function () {
                if (typeof props === 'string' || props instanceof String) {
                    if (originalArguments.length > 1) {
                        var argumentsObject = {};
                        argumentsObject[originalArguments[0]] = originalArguments[1];
                        return _css.call(self, parseProps($.extend({}, argumentsObject)));
                    } else {
                        return _css.call(self, props);
                    }
                } else {
                    return _css.call(self, parseProps($.extend({}, props)));
                }
            };
        $win.resize(update);
        return update();
    };
}(jQuery, window));