我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
使用FlexBox CSS
Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名,但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中,并选择要展开的部分。它们将自动占用容器中的所有可用空间。
其他回答
只需使用“vh”单位而不是“px”,这意味着查看端口高度。
height: 100vh;
你没有提到一些重要的细节,比如:
布局是否固定宽度?两列中的一列或两列的宽度是否固定?
有一种可能性:
身体第二部分{边距: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>
这取决于哪些柱需要固定,哪些柱是液体。您也可以使用绝对定位来实现这一点,但我通常使用浮点数来获得更好的结果(特别是在跨浏览器方面)。
其中一个选项是使用CSS表。它具有强大的浏览器支持,甚至可以在Internet Explorer 8中工作。
JSFiddle示例
html,正文{高度:100%;边距:0;}.容器{显示:表格;宽度:100%;高度:100%;}.左,.右{显示:表格单元格;宽度:50%;}.对{背景:灰色;}<div class=“container”><div class=“left”></div><div class=“right”></div></div>
尝试此操作-已测试:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
在以后的版本中,您可以使用vh:
#right, #left {
height: 100vh
}
在这种情况下,可以使用vh,它是相对于视口高度的1%。。。
这意味着,如果你想掩盖高度,只需使用100vh。
请看下面我在这里为您绘制的图像:
尝试我为您创建的代码段,如下所示:
.左侧{高度:100vh;宽度:50%;背景色:灰色;浮动:左侧;}.对{高度:100vh;宽度:50%;背景色:红色;浮动:右侧;}<div class=“left”></div><div class=“right”></div>