我有一个包含两列的布局 - 左边的 div 和右边的 div。
右边的 div 有一个灰色的 background-color，我需要它根据用户浏览器窗口的高度垂直扩展。现在，background-color 结束于该 div 中的最后一段内容。
我试过 height:100%, min-height:100%; 等
最佳答案
有几个 CSS 3 测量单位称为:
Viewport-Percentage (or Viewport-Relative) Lengths
什么是视口(viewport)百分比长度？
来自上面链接的 W3 候选推荐:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
这些单位是vh(视口(viewport)高度)、vw(视口(viewport)宽度)、vmin(视口(viewport)最小长度)和vmax (视口(viewport)最大长度)。
如何使用它来使分隔线填充浏览器的高度？
对于这个问题，我们可以利用vh:1vh 等于视口(viewport)高度的1%。也就是说，100vh 等于浏览器窗口的高度，无论元素位于 DOM 树中的哪个位置:
HTML
<div></div>
CSS
div {
height: 100vh;
}
这实际上就是所有需要的。这是一个 JSFiddle example正在使用中。
哪些浏览器支持这些新单位？
除 Opera Mini 外，目前所有最新的主流浏览器都支持此功能。查看Can I use...以获得进一步的支持。
如何将其用于多列？
对于手头的问题，具有左右分隔线，这里是 JSFiddle example显示涉及 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像素，不是 body 高度的 100%。使用 100vh 意味着 p 标签将是 body 的 100% 高度，而不管 div 高度如何。看看这个accompanying JSFiddle轻松看出差异!
关于html - 如何使浏览器窗口的高度为100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58699578/