我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
非常简单的解决方案，支持跨域，还支持浏览器重新调整大小。
<div style="height: 100vh;">
<iframe src="..." width="100%" height="80%"></iframe>
</div>
根据需要调整iframe高度属性（将div高度属性保留为100vh）。
为什么80%？在我的真实场景中，我在div中的iframe之前有一个标头，这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%（否则它将是包含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 */
}
其中一个选项是使用CSS表。它具有强大的浏览器支持，甚至可以在Internet Explorer 8中工作。
JSFiddle示例
html，正文{高度：100%；边距：0；}.容器{显示：表格；宽度：100%；高度：100%；}.左，.右{显示：表格单元格；宽度：50%；}.对{背景：灰色；}<div class=“container”><div class=“left”></div><div class=“right”></div></div>
尝试在html和body中设置高度：100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同，请使用或设置父元素display：flex属性。
现在使用高度：100vh；对于固定的窗口高度：
<style>
.header-top {
height: 100vh;
background: #000;
color: #FFF;
display: flex;
align-items: center;
padding: 10px;
justify-content: space-around;
}
.header-top ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.header-top ul li {
padding:0px 10px;
}
</style>
<div class="header-top">
<div class="logo">Hello</div>
<ul>
<li>Menu</li>
<li>About Us</li>
<li>Contact US</li>
<li>Login</li>
</ul>
</div>
最简单的方法就是这样做。
第二部分{背景：红色；高度：100vh；}正文{边距：0px；}<div></div>
