我有一个包含两列的布局 - 左 div 和右 div。
右边的 div 有一个灰色的 background-color，我需要它根据用户浏览器窗口的高度垂直展开。现在，background-color 结束于该 div 中的最后一段内容。
我试过 height:100%、min-height:100%; 等。
height 属性的简单而清晰的解释：stackoverflow.com/a/31728799/3597276
有几个 CSS 3 度量单位称为：
视口百分比（或视口相对）长度
什么是视口百分比长度？
从上面链接的 W3 候选推荐中：
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
这些单位是 vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和 vmax（视口最大长度）。
如何使用它来使分隔线填充浏览器的高度？
对于这个问题，我们可以利用 vh：1vh 等于视口高度的 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 即可轻松看出区别！
如果您想设置 <div> 或任何元素的高度，您也应该将 <body> 和 <html> 的高度设置为 100%。然后您可以将元素的高度设置为 100% :)
这是一个例子：
body, html {
height: 100%;
}
#right {
height: 100%;
}
html { height: 100%*number of blocks; }、body { height: 100%;}、#div { height: 100%/number of blocks; }。因此，如果您有 3 个部分，它将是 html { height: 300%; } body { height: 100%; } #div { height: 33.3% }
如果你能够绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
会做的。
position:relative 并且它的高度不是视口的 100% 时。它将调整顶部和底部以适应它的下一个相对或绝对祖先。
您可以在 CSS 中使用视口单元：
HTML：
<div id="my-div">Hello World!</div>
CSS：
#my-div {
height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
* { box-sizing: border-box; } 来防止这种情况发生。
在这种情况下，您可以使用 vh，它相对于视口 1% 的高度...
这意味着如果您想遮住高度，只需使用 100vh。
看看我在这里为你画的下图：
https://i.stack.imgur.com/g0kUu.jpg
试试我为你创建的片段如下：
.left { 高度：100vh;宽度：50%；背景颜色：灰色；向左飘浮; } .right { 高度：100vh;宽度：50%；背景颜色：红色；浮动：对； }
paddings/margins
与 flex model 解决方案相比，所有其他解决方案（包括投票最多的带有 vh 的解决方案）都不是最佳解决方案。
随着 CSS flex model 的出现，解决 100% 高度问题变得非常非常容易：在父元素上使用 height: 100%; display: flex，在子元素上使用 flex: 1。它们会自动占用容器中的所有可用空间。
请注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。
弹性模型是 supported by all major browsers 以及 IE11+。
html, 身体 { 高度：100%; } 身体 { 显示：弹性； } .left, .right { 弹性：1; } .left { 背景：橙色； } .right { 背景：青色； }
在此处了解有关 flex model 的更多信息。
overflow-y: auto; 可能会避免“容器超出原始车身高度”。
body 还需要 margin: 0px
你没有提到一些重要的细节，比如：
布局是固定宽度吗？
两列或两列的宽度是否固定？
这是一种可能性：
身体，div {边距：0；边框：0 无；填充：0； } html, body, #wrapper, #left, #right { 高度：100%;最小高度：100%； } #wrapper { 边距：0 自动；溢出：隐藏；宽度：960px； // 宽度可选 } #left { 背景：黄色；向左飘浮;宽度：360px； // 宽度可选但推荐 } #right { 背景：灰色；左边距：360px； // 必须和之前的宽度一致 }
根据需要固定哪些色谱柱以及哪些色谱柱是液体，对此有许多变化。您也可以使用绝对定位来做到这一点，但我通常会发现使用浮动来获得更好的结果（特别是在跨浏览器方面）。
这对我有用：
使用 position:fixed 而不是 position:absolute，这样即使您向下滚动，分区也会扩展到屏幕的末尾。
这是高度的修复。
在您的 CSS 中使用：
#your-object: height: 100vh;
对于不支持 vh-units 的浏览器，请使用 modernizr。
添加此脚本（为 vh-units 添加检测）
// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
var bool;
Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
var height = parseInt(window.innerHeight/2,10),
compStyle = parseInt((window.getComputedStyle ?
getComputedStyle(elem, null) :
elem.currentStyle)["height"],10);
bool= !!(compStyle == height);
});
return bool;
});
最后，如果浏览器不支持 vh-units，则使用此函数将视口的高度添加到 #your-object：
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height())+'px'});
}
});
即使这里有所有的答案，我惊讶地发现没有一个能真正解决问题。如果我使用 100vh height/min-height，当内容超过一页时，布局会中断。如果我改为使用 100% height/min-height，则当内容小于页面高度时布局会中断。
我发现解决这两种情况的解决方案是结合前两个答案：
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
100vw = 视口宽度的 100%。
100vh = 视口高度的 100%。
如果您想将 div 宽度或高度设置为 browser-window-size 的 100%，您应该使用：
对于宽度：100vw
对于高度：100vh
或者，如果您想将其设置为更小，请使用 CSS calc 函数。例子：
#example {
width: calc(100vw - 32px)
}
试试这个 - 测试：
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
编辑：2020年更新：
您现在可以使用 vh：
#right, #left {
height: 100vh
}
100% 对于宽度和高度的工作方式不同。
指定 width: 100% 时，表示“占用父元素可用宽度或窗口宽度的 100%”。
当您指定 height: 100% 时，它仅表示“从父元素占用 100% 的可用高度”。这意味着如果您没有在顶级元素指定高度，所有子元素的高度将是 0 或父元素的高度，这就是为什么您需要将最顶层元素设置为具有 {3 } 的窗口高度。
我总是指定身体的最小高度为 100vh，它使定位和计算变得容易，
body {
min-height: 100vh;
}
整个页面称为“视口”，您可以根据 CSS3 中的视口设计元素。
这样的单位称为视口百分比长度，并且与初始包含块的大小有关。
视口高度称为 vh。页面的完整高度为 100vh。
视口宽度称为 vw。页面的完整高度为 100vw。
还有vmin（视口最小长度）和vmax（视口最大长度）。
所以现在，您的问题可以通过在 CSS 中添加以下内容来轻松解决：
.classname-for-right-div /*You could also use an ID*/ {
height: 100vh;
}
这是信息about the Viewport-relative lengths
添加 min-height: 100% 并且不指定高度（或将其设置为自动）。它完全为我完成了工作：
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
最简单的方法是这样做。
div {背景：红色；高度：100vh； } 正文 { 边距：0px; }
有多种方法可用于将 <div> 的高度设置为 100%。
方法（一）：
html, 身体 { 高度：100%;最小高度：100%； } .div-left { 高度：100%;宽度：50%；背景：绿色； } .div-right { 高度：100%;宽度：50%；背景：灰色； }
使用 vh 的方法 (B)：
html, 身体 { 高度：100%;最小高度：100%； } .div-left { 高度：100vh;宽度：50%；背景：绿色；向左飘浮; } .div-right { 高度：100vh;宽度：50%；背景：灰色；浮动：对； }
方法（c）使用弹性盒：
html, 身体 { 高度：100%;最小高度：100%； } .wrapper { 高度：100%;最小高度：100%；显示：弯曲； } .div-left { 宽度：50%;背景：绿色； } .div-right { 宽度：50%;背景：灰色； }
尝试在 html 中设置 height:100% & body
html,
body {
height: 100%;
}
如果您想 2 div 高度相同，请使用或设置父元素 display:flex 属性。
这对我有用：
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 */
}
取自 this page。
这与您在以前的答案中的内容不完全相同，但它可能对某些人有所帮助：
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/
默认情况下，块元素会占用其父元素的整个宽度。
这就是他们如何满足他们的设计要求，即垂直堆叠。
9.4.1 块格式化上下文 在块格式化上下文中，框从包含块的顶部开始垂直排列。
但是，这种行为不会扩展到高度。
默认情况下，大多数元素是其内容的高度 (height: auto)。
与宽度不同，如果你想要额外的空间，你需要指定一个高度。
因此，请记住以下两点：
除非你想要全宽，否则你需要定义一个块元素的宽度
除非您想要内容高度，否则您需要定义元素的高度
.联系{显示：弹性； /* 默认全宽 */ min-height: 100vh; /* 至少使用视口的全高 */ } .left { flex: 0 0 60%;背景色：番茄； } .right { 弹性：1;背景颜色：粉红色； } 正文 { 边距：0; } /* 删除默认边距 */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut劳力和多洛尔麦格纳阿里夸。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.
如果您将 html 和正文高度设置为 100%，那么它将覆盖整个页面，如果您将任何特定的 div 最小高度设置为 100%，那么它将覆盖整个窗口，如下所示：
CSS
html,body{
height:100%;
}
div#some-div{
min-height:100%;
}
记住
这仅在 div 的直接父级是 body 时才有效，因为百分比总是从直接父级继承，并且通过执行上述 css 代码，您告诉 div 从直接父级（body）继承高度 100% 并使其成为您的最小高度： 100%
另一种方式
只需将 div 高度设置为 100vh，它的平均 100 视口高度
CSS
div#some-div{
height:100vh
}
只需使用“vh”单位而不是“px”，这意味着视口高度。
height: 100vh;
选项之一是使用 CSS 表。它有很好的浏览器支持，甚至可以在 Internet Explorer 8 中运行。
html, 身体 { 高度：100%;边距：0； } .container { 显示：表；宽度：100%；高度：100%； } .left, .right { 显示：表格单元格；宽度：50%； } .right { 背景：灰色； }
试试这个...
*{ 填充：0;边距：0； } .parent_div{ 溢出：隐藏；明确：两者；颜色：#fff;文本对齐：居中； } .left_div { 浮动：左；高度：100vh；宽度：50%；背景颜色：蓝色； } .right_div { 浮动：对；高度：100vh；宽度：50%；背景颜色：绿色； }
Flexbox 非常适合这类问题。 Flexbox 以在水平方向布局内容而闻名，但实际上它同样适用于垂直布局问题。您所要做的就是将垂直部分包裹在一个弹性容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。
您可以使用 display: flex 和 height: 100vh
html, 身体 { 高度：100%;边距：0px； } 身体 { 显示：弹性； } .left, .right { 弹性：1; } .left { 背景：橙色； } .right { 背景：青色； }
你需要做两件事，一是将高度设置为你已经做过的 100%。其次是将位置设置为绝对。这应该够了吧。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
vh。
vh。
实际上最适合我的是使用 vh 属性。
在我的 React 应用程序中，即使调整大小，我也希望 div 与页面高度匹配。我尝试了 height: 100%;、overflow-y: auto;，但在设置 height:(your percent)vh; 时，它们都没有按预期工作。
注意：如果您使用填充、圆角等，请确保从您的 vh 属性百分比中减去这些值，否则会增加额外的高度并显示滚动条。这是我的示例：
.frame {
background-color: rgb(33, 2, 211);
height: 96vh;
padding: 1% 3% 2% 3%;
border: 1px solid rgb(212, 248, 203);
border-radius: 10px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
box-sizing: border-box; 会克服这个问题，这意味着在计算元素的大小（宽度和高度）时也会考虑边框大小.
.wrapper { 显示：-webkit-box;显示：-ms-flexbox；显示：弯曲； -ms-flex-wrap：换行；弹性包装：换行；高度：100vh； // 高度窗口 (vh) } .wrapper .left{ width: 80%; // 宽度可选，但推荐使用 } .wrapper .right{ width: 20%; // 宽度可选，但推荐使用 background-color: #dd1f26; }
widht（接近结尾）
min-height:100vh似乎可以解决这个问题。