我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
如果你能绝对定位你的元素,
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
其他回答
100vw=视口宽度的100%。
100vh=视口高度的100%。
如果要将div宽度或高度设置为浏览器窗口大小的100%,应使用:
宽度:100vw
高度:100vh
或者,如果您想将其设置得更小,请使用CSS calc函数。例子:
#example {
width: calc(100vw - 32px)
}
整个页面称为“视口”,您可以根据CSS 3中的视口设计元素。
这种单位称为视口百分比长度,与初始包含块的大小相关。
视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin(视口最小长度)和vmax(视口最大长度)。
因此,现在,您的问题可以通过在CSS中添加以下内容轻松解决:
.classname-for-right-div /* You could also use an ID */ {
height: 100vh;
}
以下是有关视口相对长度的信息。
如果你能绝对定位你的元素,
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
即使有了这里的所有答案,我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度,当内容超过一页时,布局就会中断。如果我改用100%高度/分钟高度,当内容小于页面高度时,布局会中断。
我找到的解决方案(解决了这两种情况)是结合前两个答案:
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
这对我有用:
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 */
}
摘自本页。