我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。

我尝试过高度:100%,最小高度:100%;,等


当前回答

整个页面称为“视口”,您可以根据CSS 3中的视口设计元素。

这种单位称为视口百分比长度,与初始包含块的大小相关。

视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin(视口最小长度)和vmax(视口最大长度)。

因此,现在,您的问题可以通过在CSS中添加以下内容轻松解决:

.classname-for-right-div /* You could also use an ID */ {
  height: 100vh;
}

以下是有关视口相对长度的信息。

其他回答

您可以使用以下CSS使div达到浏览器窗口高度的100%:

display: block;
position: relative;
bottom: 0;
height: 100%;

如果你能绝对定位你的元素,

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

来源

尝试在html和body中设置高度:100%

html, 
body {
    height: 100%;
}

如果您想要2个div高度相同,请使用或设置父元素display:flex属性。

使用FlexBox CSS

Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名,但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中,并选择要展开的部分。它们将自动占用容器中的所有可用空间。