我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
尝试在html和body中设置高度:100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同,请使用或设置父元素display:flex属性。
其他回答
如果你能绝对定位你的元素,
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
最简单:
html,正文{高度:100%;最小高度:100%;}正文{位置:相对;背景:紫色;边距:0;填充:0;}.全高{显示:块;位置:相对;背景:红色;高度:100%;宽度:300px;}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>
.包装器{显示:-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>
尝试在html和body中设置高度:100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同,请使用或设置父元素display:flex属性。
100%对于宽度和高度的作用不同。
当您指定width:100%时,意味着“从父元素或窗口的宽度中占用可用宽度的100%”
当您指定height:100%时,它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度,则所有子元素的高度将为0或父元素的高度,这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。
我总是指定车身的最小高度为100vh,这使得定位和计算变得容易,
body {
min-height: 100vh;
}