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

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

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


当前回答

最简单的方法就是这样做。

第二部分{背景:红色;高度:100vh;}正文{边距:0px;}<div></div>

其他回答

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

下面是一个示例:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

其中一个选项是使用CSS表。它具有强大的浏览器支持,甚至可以在Internet Explorer 8中工作。

JSFiddle示例

html,正文{高度:100%;边距:0;}.容器{显示:表格;宽度:100%;高度:100%;}.左,.右{显示:表格单元格;宽度:50%;}.对{背景:灰色;}<div class=“container”><div class=“left”></div><div class=“right”></div></div>

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

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

添加最小高度:100%,不指定高度(或将其设置为自动)。它完全帮了我的忙:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

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

您只需设置高度: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>