我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
整个页面称为“视口”,您可以根据CSS 3中的视口设计元素。
这种单位称为视口百分比长度,与初始包含块的大小相关。
视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin(视口最小长度)和vmax(视口最大长度)。
因此,现在,您的问题可以通过在CSS中添加以下内容轻松解决:
.classname-for-right-div /* You could also use an ID */ {
height: 100vh;
}
以下是有关视口相对长度的信息。
其他回答
您可以使用以下CSS使div达到浏览器窗口高度的100%:
display: block;
position: relative;
bottom: 0;
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>
如果你能绝对定位你的元素,
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
有两个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,很容易看出区别!
默认情况下,块元素使用其父元素的整个宽度。
这就是它们如何满足垂直堆叠的设计要求。
9.4.1块格式化上下文在块格式化上下文中,垂直,从包含块的顶部开始。
然而,这种行为不会延伸到高度。
默认情况下,大多数元素都是其内容的高度(高度:auto)。
与宽度不同,如果需要额外空间,则需要指定高度。
因此,请记住以下两点:
除非需要全宽,否则需要定义块元素的宽度除非需要内容高度,否则需要定义元素的高度
.联系人{显示:flex;/*默认情况下为全宽*/最小高度:100vh;/*至少使用视口的全高度*/}.左侧{弹性:0 0 60%;背景色:番茄;}.对{挠曲:1;背景色:粉色;}body{margin:0;}/*删除默认边距*/<div class=“联系人”><section class=“left”><div class=“”><h1>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</h1></div></section><section class=“right”><img/></section></div>