我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
如果要设置＜div＞或任何元素的高度，也应该将＜body＞和＜html＞的高度设置为100%。然后可以将元素的高度设置为100%：）
下面是一个示例：
body, html {
height: 100%;
}
#right {
height: 100%;
}
其他回答
尝试一下。。。
* {填充：0；边距：0；}.父目录{溢出：隐藏；清晰：两者都有；颜色：#FFF；文本对齐：居中；}.left_div{浮动：左侧；高度：100vh；宽度：50%；背景色：蓝色；}.右_右{浮动：右侧；高度：100vh；宽度：50%；背景色：绿色；}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>
即使有了这里的所有答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度，当内容超过一页时，布局就会中断。如果我改用100%高度/分钟高度，当内容小于页面高度时，布局会中断。
我找到的解决方案（解决了这两种情况）是结合前两个答案：
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
有两个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，很容易看出区别！
最简单：
html，正文{高度：100%；最小高度：100%；}正文{位置：相对；背景：紫色；边距：0；填充：0；}.全高{显示：块；位置：相对；背景：红色；高度：100%；宽度：300px；}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>
如果你能绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
