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

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

我尝试过高度:100%,最小高度:100%;,等


当前回答

您可以使用以下CSS使div达到浏览器窗口高度的100%:

display: block;
position: relative;
bottom: 0;
height: 100%;

其他回答

默认情况下,块元素使用其父元素的整个宽度。

这就是它们如何满足垂直堆叠的设计要求。

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>

最简单:

html,正文{高度:100%;最小高度:100%;}正文{位置:相对;背景:紫色;边距:0;填充:0;}.全高{显示:块;位置:相对;背景:红色;高度:100%;宽度:300px;}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>

您可以使用显示器:flex和高度:100vh

html,正文{高度:100%;边距:0px;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>

你没有提到一些重要的细节,比如:

布局是否固定宽度?两列中的一列或两列的宽度是否固定?

有一种可能性:

身体第二部分{边距:0;边框:0无;填充:0;}html,身体#包装,#左侧,#权利{高度:100%;最小高度:100%;}#包装,包装{边距:0自动;溢出:隐藏;宽度:960px;/*宽度可选*/}#左侧{背景:黄色;浮动:左侧;宽度:360px;/*宽度可选,但建议使用*/}#权利{背景:灰色;左边距:360px;/*必须与以前的宽度一致*/}<html><head><title>示例</title></head><body><div id=“wrapper”><div id=“left”>左边</div><div id=“right”></div></div></body></html>

这取决于哪些柱需要固定,哪些柱是液体。您也可以使用绝对定位来实现这一点,但我通常使用浮点数来获得更好的结果(特别是在跨浏览器方面)。

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

html, 
body {
    height: 100%;
}

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