我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左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;
}
以下是有关视口相对长度的信息。
其他回答
此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。
您只需设置高度: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>
如果将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
}
与flex模型解决方案相比,所有其他解决方案,包括投票最高的vh解决方案都是次优的。
随着CSS flex模型的出现,解决100%高度问题变得非常非常简单:使用高度:100%;显示:父元素上显示flex,子元素上显示flex:1。它们将自动占用容器中的所有可用空间。
注意标记和CSS是多么简单。没有桌子黑客之类的。
所有主要浏览器以及IE11+都支持flex模型。
html,正文{高度:100%;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>
在这里了解有关flex模型的更多信息。
即使有了这里的所有答案,我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度,当内容超过一页时,布局就会中断。如果我改用100%高度/分钟高度,当内容小于页面高度时,布局会中断。
我找到的解决方案(解决了这两种情况)是结合前两个答案:
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
整个页面称为“视口”,您可以根据CSS 3中的视口设计元素。
这种单位称为视口百分比长度,与初始包含块的大小相关。
视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin(视口最小长度)和vmax(视口最大长度)。
因此,现在,您的问题可以通过在CSS中添加以下内容轻松解决:
.classname-for-right-div /* You could also use an ID */ {
height: 100vh;
}
以下是有关视口相对长度的信息。