我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
尽管这个解决方案是用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%。
第二种方法通过获取正文的高度来获取显示给用户的页面高度，然后减去页眉大小，以了解显示该列的剩余高度。
其他回答
其中一个选项是使用CSS表。它具有强大的浏览器支持，甚至可以在Internet Explorer 8中工作。
JSFiddle示例
html，正文{高度：100%；边距：0；}.容器{显示：表格；宽度：100%；高度：100%；}.左，.右{显示：表格单元格；宽度：50%；}.对{背景：灰色；}<div class=“container”><div class=“left”></div><div class=“right”></div></div>
.包装器{显示：-webkit框；显示：-ms flexbox；显示：柔性；-ms-flex-wrap:包裹；柔性包裹：包裹；高度：100vh；/*高度窗口（vh）*/}.包装器.左侧{宽度：80%；/*宽度可选，但建议使用*/}.包装器.右侧{宽度：20%；/*宽度可选，但建议使用*/背景色：#DD1F26；}<!--vw：视口宽度的百分之一。vh：视口高度的百分之一。vmin：视口宽度或高度中较小者的百分之一。vmax：视口宽度或高度中较大者的百分之一。--><div class=“wrapper”><div class=“left”>左边</div><div class=“right”>正确的</div></div>
你没有提到一些重要的细节，比如：
布局是否固定宽度？两列中的一列或两列的宽度是否固定？
有一种可能性：
身体第二部分{边距：0；边框：0无；填充：0；}html，身体#包装，#左侧，#权利{高度：100%；最小高度：100%；}#包装，包装{边距：0自动；溢出：隐藏；宽度：960px；/*宽度可选*/}#左侧{背景：黄色；浮动：左侧；宽度：360px；/*宽度可选，但建议使用*/}#权利{背景：灰色；左边距：360px；/*必须与以前的宽度一致*/}<html><head><title>示例</title></head><body><div id=“wrapper”><div id=“left”>左边</div><div id=“right”></div></div></body></html>
这取决于哪些柱需要固定，哪些柱是液体。您也可以使用绝对定位来实现这一点，但我通常使用浮点数来获得更好的结果（特别是在跨浏览器方面）。
默认情况下，块元素使用其父元素的整个宽度。
这就是它们如何满足垂直堆叠的设计要求。
9.4.1块格式化上下文在块格式化上下文中，垂直，从包含块的顶部开始。
然而，这种行为不会延伸到高度。
默认情况下，大多数元素都是其内容的高度（高度：auto）。
与宽度不同，如果需要额外空间，则需要指定高度。
因此，请记住以下两点：
除非需要全宽，否则需要定义块元素的宽度除非需要内容高度，否则需要定义元素的高度
.联系人{显示：flex；/*默认情况下为全宽*/最小高度：100vh；/*至少使用视口的全高度*/}.左侧{弹性：0 0 60%；背景色：番茄；}.对{挠曲：1；背景色：粉色；}body｛margin:0；｝/*删除默认边距*/<div class=“联系人”><section class=“left”><div class=“”><h1>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</h1></div></section><section class=“right”><img/></section></div>
现在使用高度：100vh；对于固定的窗口高度：
<style>
.header-top {
height: 100vh;
background: #000;
color: #FFF;
display: flex;
align-items: center;
padding: 10px;
justify-content: space-around;
}
.header-top ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.header-top ul li {
padding:0px 10px;
}
</style>
<div class="header-top">
<div class="logo">Hello</div>
<ul>
<li>Menu</li>
<li>About Us</li>
<li>Contact US</li>
<li>Login</li>
</ul>
</div>
