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

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

其他回答

尝试一下。。。

* {填充:0;边距:0;}.父目录{溢出:隐藏;清晰:两者都有;颜色:#FFF;文本对齐:居中;}.left_div{浮动:左侧;高度:100vh;宽度:50%;背景色:蓝色;}.右_右{浮动:右侧;高度:100vh;宽度:50%;背景色:绿色;}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>

此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。

您只需设置高度:100%。

html,正文{高度:100%;边距:0;}.内容{高度:100%;最小高度:100%;位置:相对;}.剩余内容{高度:自动;最小高度:100%;浮动:左侧;背景:#ddd;宽度:50%;位置:相对;}#一个{背景:url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png)中央无重复滚动#aaa;宽度:50%;位置:相对;浮动:左侧;}#两个{背景:url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png)中央无重复滚动#520E24;宽度:50%;浮动:左侧;位置:相对;overflow-y:滚动;}<div class='content'id='one'></div><div class='content-left'id='wo'></div>

如果要设置<div>或任何元素的高度,也应该将<body>和<html>的高度设置为100%。然后可以将元素的高度设置为100%:)

下面是一个示例:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

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

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

会做到这一点。

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

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

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

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

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

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