我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
如果将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
}
其他回答
如果使用位置：绝对；和jQuery，您可以使用
$("#mydiv").css("height", $(document).height() + "px");
如果你能绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
尽管这个解决方案是用jQuery完成的，但我认为它可能对任何人来说都是有用的，因为任何人都可以根据屏幕大小制作列。
对于从页面顶部开始的列，此解决方案是最简单的。
body, html {
height: 100%;
}
div#right {
height: 100%
}
对于不从页面顶部开始的列（例如：如果它们从页眉下方开始）。
<script>
$(document).ready(function () {
var column_height = $("body").height();
column_height = column_height - 100; // 100 is the header height
column_height = column_height + "px";
$("#column").css("height",column_height);
});
</script>
第一种方法将主体高度应用于它和列，这意味着starting_pixels+height100%。
第二种方法通过获取正文的高度来获取显示给用户的页面高度，然后减去页眉大小，以了解显示该列的剩余高度。
尝试一下。。。
* {填充：0；边距：0；}.父目录{溢出：隐藏；清晰：两者都有；颜色：#FFF；文本对齐：居中；}.left_div{浮动：左侧；高度：100vh；宽度：50%；背景色：蓝色；}.右_右{浮动：右侧；高度：100vh；宽度：50%；背景色：绿色；}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>
这就是对我有用的：
<div style=“位置：固定；顶部：0px；左侧：0px，底部：0px
使用position:fixed而不是position:absolute，这样即使向下滚动分区也会扩展到屏幕的末尾。
