我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
以下内容与您之前的回答不完全相同，但可能对某些人有所帮助：
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
}
#one {
background-color: red;
}
#two {
margin-top: 0px;
background-color: black;
color: white;
overflow-y: scroll;
}
https://jsfiddle.net/newdark/qyxkk558/10/
其他回答
你没有提到一些重要的细节，比如：
布局是否固定宽度？两列中的一列或两列的宽度是否固定？
有一种可能性：
身体第二部分{边距：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>
这取决于哪些柱需要固定，哪些柱是液体。您也可以使用绝对定位来实现这一点，但我通常使用浮点数来获得更好的结果（特别是在跨浏览器方面）。
100vw=视口宽度的100%。
100vh=视口高度的100%。
如果要将div宽度或高度设置为浏览器窗口大小的100%，应使用：
宽度：100vw
高度：100vh
或者，如果您想将其设置得更小，请使用CSS calc函数。例子：
#example {
width: calc(100vw - 32px)
}
有两个CSS 3测量单位称为：
视口百分比（或视口相对）长度
什么是视口百分比长度？
从上面链接的W3候选推荐：
视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时，将相应地缩放它们。
这些单位是vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和vmax（视口最大长度）。
如何使用分隔符填充浏览器的高度？
对于这个问题，我们可以使用vh：1vh等于视口高度的1%。也就是说，100vh等于浏览器窗口的高度，而不考虑元素在DOM树中的位置：
HTML
<div></div>
CSS
div {
height: 100vh;
}
这就是我们真正需要的。这里是一个使用中的JSFiddle示例。
哪些浏览器支持这些新单元？
除Opera Mini外，目前所有最新的主要浏览器都支持此功能。我可以使用。。。以获得进一步支持。
如何将其用于多个列？
在手头的问题中，有一个左右分隔符，这里有一个JSFiddle示例，显示了一个包含vh和vw的两列布局。
100vh与100%有何不同？
以该布局为例：
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
这里的p标记设置为100%高度，但由于其包含div的高度为200像素，因此200像素中的100%变成200像素，而不是身体高度的100%。改用100vh意味着无论div高度如何，p标签都将是主体的100%高度。看看这个附带的JSFiddle，很容易看出区别！
只需使用“vh”单位而不是“px”，这意味着查看端口高度。
height: 100vh;
即使有了这里的所有答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度，当内容超过一页时，布局就会中断。如果我改用100%高度/分钟高度，当内容小于页面高度时，布局会中断。
我找到的解决方案（解决了这两种情况）是结合前两个答案：
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
