使用FlexBox CSS

Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名，但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中，并选择要展开的部分。它们将自动占用容器中的所有可用空间。

这是一个高度修正。

在CSS中使用：

#your-object: height: 100vh;

对于不支持vh单元的浏览器，请使用modernizr。

添加此脚本（为vh单元添加检测）

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
        var height = parseInt(window.innerHeight/2, 10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"], 10);

        bool = !!(compStyle == height);
    });
    return bool;
});

最后，如果浏览器不支持vh单位，请使用此函数将视口的高度添加到#your object：

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});

尝试在html和body中设置高度：100%

html, 
body {
    height: 100%;
}

如果您想要2个div高度相同，请使用或设置父元素display：flex属性。

如果你能绝对定位你的元素，

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

如果将html和body_height设置为100%，它将覆盖整个页面。

如果您将任何特定的div最小高度设置为100%，那么它将覆盖整个窗口，如下所示：

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

回想起

只有当div的直接父级是body时，这才有效，因为百分比总是从直接父级继承的，通过执行上面的CSS代码，您告诉div从直接父（body）继承100%的高度，并使其成为您的最小高度：100%。

另一种方式

只需将div高度设置为100vh。这意味着视口高度为100。

CSS

div#some-div {
  height: 100vh
}

与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。

随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。

注意标记和CSS是多么简单。没有桌子黑客之类的。

所有主要浏览器以及IE11+都支持flex模型。

html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>

在这里了解有关flex模型的更多信息。