我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
100%对于宽度和高度的作用不同。
当您指定width:100%时，意味着“从父元素或窗口的宽度中占用可用宽度的100%”
当您指定height:100%时，它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度，则所有子元素的高度将为0或父元素的高度，这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。
我总是指定车身的最小高度为100vh，这使得定位和计算变得容易，
body {
min-height: 100vh;
}
其他回答
与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。
随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。
注意标记和CSS是多么简单。没有桌子黑客之类的。
所有主要浏览器以及IE11+都支持flex模型。
html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>
在这里了解有关flex模型的更多信息。
尝试在html和body中设置高度：100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同，请使用或设置父元素display：flex属性。
100vw=视口宽度的100%。
100vh=视口高度的100%。
如果要将div宽度或高度设置为浏览器窗口大小的100%，应使用：
宽度：100vw
高度：100vh
或者，如果您想将其设置得更小，请使用CSS calc函数。例子：
#example {
width: calc(100vw - 32px)
}
以下内容与您之前的回答不完全相同，但可能对某些人有所帮助：
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/
您可以使用显示器：flex和高度：100vh
html，正文{高度：100%；边距：0px；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>
