我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
即使有了这里的所有答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度，当内容超过一页时，布局就会中断。如果我改用100%高度/分钟高度，当内容小于页面高度时，布局会中断。
我找到的解决方案（解决了这两种情况）是结合前两个答案：
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
其他回答
添加最小高度：100%，不指定高度（或将其设置为自动）。它完全帮了我的忙：
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
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/
你需要做两件事，一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
来源
100vw=视口宽度的100%。
100vh=视口高度的100%。
如果要将div宽度或高度设置为浏览器窗口大小的100%，应使用：
宽度：100vw
高度：100vh
或者，如果您想将其设置得更小，请使用CSS calc函数。例子：
#example {
width: calc(100vw - 32px)
}
即使有了这里的所有答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度，当内容超过一页时，布局就会中断。如果我改用100%高度/分钟高度，当内容小于页面高度时，布局会中断。
我找到的解决方案（解决了这两种情况）是结合前两个答案：
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
