我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
尝试在html和body中设置高度:100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同,请使用或设置父元素display:flex属性。
其他回答
此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。
您只需设置高度:100%。
html,正文{高度:100%;边距:0;}.内容{高度:100%;最小高度:100%;位置:相对;}.剩余内容{高度:自动;最小高度:100%;浮动:左侧;背景:#ddd;宽度:50%;位置:相对;}#一个{背景:url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png)中央无重复滚动#aaa;宽度:50%;位置:相对;浮动:左侧;}#两个{背景:url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png)中央无重复滚动#520E24;宽度:50%;浮动:左侧;位置:相对;overflow-y:滚动;}<div class='content'id='one'></div><div class='content-left'id='wo'></div>
如果你能绝对定位你的元素,
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
如果要设置<div>或任何元素的高度,也应该将<body>和<html>的高度设置为100%。然后可以将元素的高度设置为100%:)
下面是一个示例:
body, html {
height: 100%;
}
#right {
height: 100%;
}
有两个CSS 3测量单位称为:
视口百分比(或视口相对)长度
什么是视口百分比长度?
从上面链接的W3候选推荐:
视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时,将相应地缩放它们。
这些单位是vh(视口高度)、vw(视口宽度)、vmin(视口最小长度)和vmax(视口最大长度)。
如何使用分隔符填充浏览器的高度?
对于这个问题,我们可以使用vh:1vh等于视口高度的1%。也就是说,100vh等于浏览器窗口的高度,而不考虑元素在DOM树中的位置:
HTML
<div></div>
CSS
div {
height: 100vh;
}
这就是我们真正需要的。这里是一个使用中的JSFiddle示例。
哪些浏览器支持这些新单元?
除Opera Mini外,目前所有最新的主要浏览器都支持此功能。我可以使用。。。以获得进一步支持。
如何将其用于多个列?
在手头的问题中,有一个左右分隔符,这里有一个JSFiddle示例,显示了一个包含vh和vw的两列布局。
100vh与100%有何不同?
以该布局为例:
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
这里的p标记设置为100%高度,但由于其包含div的高度为200像素,因此200像素中的100%变成200像素,而不是身体高度的100%。改用100vh意味着无论div高度如何,p标签都将是主体的100%高度。看看这个附带的JSFiddle,很容易看出区别!
非常简单的解决方案,支持跨域,还支持浏览器重新调整大小。
<div style="height: 100vh;">
<iframe src="..." width="100%" height="80%"></iframe>
</div>
根据需要调整iframe高度属性(将div高度属性保留为100vh)。
为什么80%?在我的真实场景中,我在div中的iframe之前有一个标头,这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%(否则它将是包含div的高度,但从标头之后开始,并溢出div的底部)。