我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
尝试以下CSS:
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 100%;
}
其他回答
这就是对我有用的:
<div style=“位置:固定;顶部:0px;左侧:0px,底部:0px
使用position:fixed而不是position:absolute,这样即使向下滚动分区也会扩展到屏幕的末尾。
其中一个选项是使用CSS表。它具有强大的浏览器支持,甚至可以在Internet Explorer 8中工作。
JSFiddle示例
html,正文{高度:100%;边距:0;}.容器{显示:表格;宽度:100%;高度:100%;}.左,.右{显示:表格单元格;宽度:50%;}.对{背景:灰色;}<div class=“container”><div class=“left”></div><div class=“right”></div></div>
您可以使用显示器:flex和高度:100vh
html,正文{高度:100%;边距:0px;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>
您可以在CSS中使用查看端口单元:
HTML格式:
<div id="my-div">Hello World!</div>
CSS:
#my-div {
height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}
.包装器{显示:-webkit框;显示:-ms flexbox;显示:柔性;-ms-flex-wrap:包裹;柔性包裹:包裹;高度:100vh;/*高度窗口(vh)*/}.包装器.左侧{宽度:80%;/*宽度可选,但建议使用*/}.包装器.右侧{宽度:20%;/*宽度可选,但建议使用*/背景色:#DD1F26;}<!--vw:视口宽度的百分之一。vh:视口高度的百分之一。vmin:视口宽度或高度中较小者的百分之一。vmax:视口宽度或高度中较大者的百分之一。--><div class=“wrapper”><div class=“left”>左边</div><div class=“right”>正确的</div></div>