我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
这是一个高度修正。
在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，正文{高度：100%；最小高度：100%；}正文{位置：相对；背景：紫色；边距：0；填充：0；}.全高{显示：块；位置：相对；背景：红色；高度：100%；宽度：300px；}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>
尽管这个解决方案是用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%。
第二种方法通过获取正文的高度来获取显示给用户的页面高度，然后减去页眉大小，以了解显示该列的剩余高度。
与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。
随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。
注意标记和CSS是多么简单。没有桌子黑客之类的。
所有主要浏览器以及IE11+都支持flex模型。
html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>
在这里了解有关flex模型的更多信息。
如果使用位置：绝对；和jQuery，您可以使用
$("#mydiv").css("height", $(document).height() + "px");
尝试在身体上使用“height:100%”。
