我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
如果要设置＜div＞或任何元素的高度，也应该将＜body＞和＜html＞的高度设置为100%。然后可以将元素的高度设置为100%：）
下面是一个示例：
body, html {
height: 100%;
}
#right {
height: 100%;
}
其他回答
尝试一下。。。
* {填充：0；边距：0；}.父目录{溢出：隐藏；清晰：两者都有；颜色：#FFF；文本对齐：居中；}.left_div{浮动：左侧；高度：100vh；宽度：50%；背景色：蓝色；}.右_右{浮动：右侧；高度：100vh；宽度：50%；背景色：绿色；}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>
尝试在html和body中设置高度：100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同，请使用或设置父元素display：flex属性。
如果要设置＜div＞或任何元素的高度，也应该将＜body＞和＜html＞的高度设置为100%。然后可以将元素的高度设置为100%：）
下面是一个示例：
body, html {
height: 100%;
}
#right {
height: 100%;
}
这是一个高度修正。
在CSS中使用：
#your-object: height: 100vh;
对于不支持vh单元的浏览器，请使用modernizr。
添加此脚本（为vh单元添加检测）
// 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单位，请使用此函数将视口的高度添加到#your object：
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height()) + 'px'});
}
});
现在使用高度：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>
