min-height : 100vh not working in ie8 - css

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

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));

Answer 2

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