我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。

我尝试过高度:100%,最小高度:100%;,等


当前回答

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

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

会做到这一点。

其他回答

您可以使用显示器:flex和高度:100vh

html,正文{高度:100%;边距:0px;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>

这对我有用:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

摘自本页。

如果使用位置:绝对;和jQuery,您可以使用

$("#mydiv").css("height", $(document).height() + "px");

您可以使用以下CSS使div达到浏览器窗口高度的100%:

display: block;
position: relative;
bottom: 0;
height: 100%;

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

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

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

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

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

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