我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
尝试以下CSS：
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 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/
如果你能绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
使用FlexBox CSS
Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名，但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中，并选择要展开的部分。它们将自动占用容器中的所有可用空间。
有几种方法可用于将＜div＞的高度设置为100%。
方法（A）：
html，正文{高度：100%；最小高度：100%；}.div左{高度：100%；宽度：50%；背景：绿色；}.div右{高度：100%；宽度：50%；背景：灰色；}<div class=“div left”></div><div class=“div right”></div>
方法（B）使用vh：
html，正文{高度：100%；最小高度：100%；}.div左{高度：100vh；宽度：50%；背景：绿色；浮动：左侧；}.div右{高度：100vh；宽度：50%；背景：灰色；浮动：右侧；}<div class=“div left”></div><div class=“div right”></div>
方法（c）使用挠性箱：
html，正文{高度：100%；最小高度：100%；}.包装器{高度：100%；最小高度：100%；显示：柔性；}.div左{宽度：50%；背景：绿色；}.div右{宽度：50%；背景：灰色；}<div class=“wrapper”><div class=“div left”></div><div class=“div right”></div></div>
100%对于宽度和高度的作用不同。
当您指定width:100%时，意味着“从父元素或窗口的宽度中占用可用宽度的100%”
当您指定height:100%时，它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度，则所有子元素的高度将为0或父元素的高度，这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。
我总是指定车身的最小高度为100vh，这使得定位和计算变得容易，
body {
min-height: 100vh;
}
