我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
尝试在html和body中设置高度:100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同,请使用或设置父元素display:flex属性。
其他回答
如果使用位置:绝对;和jQuery,您可以使用
$("#mydiv").css("height", $(document).height() + "px");
您可以使用显示器:flex和高度:100vh
html,正文{高度:100%;边距:0px;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>
整个页面称为“视口”,您可以根据CSS 3中的视口设计元素。
这种单位称为视口百分比长度,与初始包含块的大小相关。
视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin(视口最小长度)和vmax(视口最大长度)。
因此,现在,您的问题可以通过在CSS中添加以下内容轻松解决:
.classname-for-right-div /* You could also use an ID */ {
height: 100vh;
}
以下是有关视口相对长度的信息。
你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
来源
如果将html和body_height设置为100%,它将覆盖整个页面。
如果您将任何特定的div最小高度设置为100%,那么它将覆盖整个窗口,如下所示:
CSS
html, body {
height: 100%;
}
div#some-div {
min-height: 100%;
}
回想起
只有当div的直接父级是body时,这才有效,因为百分比总是从直接父级继承的,通过执行上面的CSS代码,您告诉div从直接父(body)继承100%的高度,并使其成为您的最小高度:100%。
另一种方式
只需将div高度设置为100vh。这意味着视口高度为100。
CSS
div#some-div {
height: 100vh
}