我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
整个页面称为“视口”，您可以根据CSS 3中的视口设计元素。
这种单位称为视口百分比长度，与初始包含块的大小相关。
视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin（视口最小长度）和vmax（视口最大长度）。
因此，现在，您的问题可以通过在CSS中添加以下内容轻松解决：
.classname-for-right-div /* You could also use an ID */ {
height: 100vh;
}
以下是有关视口相对长度的信息。
其他回答
这对我有用：
html, body {
height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}
#wrapper {
min-height: 100%; /* Minimum height for a modern browser */
height:auto !important; /* Important rule for a modern browser */
height:100%; /* Minimum height for Internet Explorer */
overflow: hidden !important; /* Firefox scroll-bar */
}
摘自本页。
尝试此操作-已测试：
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
在以后的版本中，您可以使用vh：
#right, #left {
height: 100vh
}
最简单的方法就是这样做。
第二部分{背景：红色；高度：100vh；}正文{边距：0px；}<div></div>
您可以在CSS中使用查看端口单元：
HTML格式：
<div id="my-div">Hello World!</div>
CSS:
#my-div {
height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}
尝试在html和body中设置高度：100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同，请使用或设置父元素display：flex属性。
