最小高度：100vh 在 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 和 vh 单位受 IE 9 及更高版本支持。

试试这个：

    (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'
});

工作演示：http://jsbin.com/izosuy/1/edit?js,output

在 IE8 中也能正常工作！

阅读此主题以获取更多信息：Is there any cross-browser javascript for making vh and vw units work

Answer 2

Silver Ringvee 的回答绝对正确，除了默认的 jQuery .css() 功能在您想要执行 .css('margin-right') 之类的操作以获得元素的右边距时会被破坏。我在使用 fancyBox 时发现了这个问题。我通过检查 props 是否为字符串来解决这个问题，如果是，则不使用 parseProps($.extend({}, props))。我还添加了检查是否给出了多个参数，以支持 css('margin-right', '12px')。这是我的代码：

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

最小高度：100vh 在 ie8 中不工作

min-height : 100vh not working in ie8

css

internet-explorer-8