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

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

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


当前回答

如果使用位置:绝对;和jQuery,您可以使用

$("#mydiv").css("height", $(document).height() + "px");

其他回答

这对我有用:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

摘自本页。

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

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

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

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

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

html, 
body {
    height: 100%;
}

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