我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。

我尝试过高度:100%,最小高度: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>

其他回答

尝试此操作-已测试:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

在以后的版本中,您可以使用vh:

#right, #left {
  height: 100vh
}

如果使用位置:绝对;和jQuery,您可以使用

$("#mydiv").css("height", $(document).height() + "px");

尝试在html和body中设置高度:100%

html, 
body {
    height: 100%;
}

如果您想要2个div高度相同,请使用或设置父元素display:flex属性。

尝试在身体上使用“height:100%”。

非常简单的解决方案,支持跨域,还支持浏览器重新调整大小。

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根据需要调整iframe高度属性(将div高度属性保留为100vh)。

为什么80%?在我的真实场景中,我在div中的iframe之前有一个标头,这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%(否则它将是包含div的高度,但从标头之后开始,并溢出div的底部)。