我有一个包含两列的布局-左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
}