我有一个包含两列的布局-左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;
}
以下是有关视口相对长度的信息。
其他回答
这对我有用:
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 */
}
摘自本页。
你没有提到一些重要的细节,比如:
布局是否固定宽度?两列中的一列或两列的宽度是否固定?
有一种可能性:
身体第二部分{边距:0;边框:0无;填充:0;}html,身体#包装,#左侧,#权利{高度:100%;最小高度:100%;}#包装,包装{边距:0自动;溢出:隐藏;宽度:960px;/*宽度可选*/}#左侧{背景:黄色;浮动:左侧;宽度:360px;/*宽度可选,但建议使用*/}#权利{背景:灰色;左边距:360px;/*必须与以前的宽度一致*/}<html><head><title>示例</title></head><body><div id=“wrapper”><div id=“left”>左边</div><div id=“right”></div></div></body></html>
这取决于哪些柱需要固定,哪些柱是液体。您也可以使用绝对定位来实现这一点,但我通常使用浮点数来获得更好的结果(特别是在跨浏览器方面)。
整个页面称为“视口”,您可以根据CSS 3中的视口设计元素。
这种单位称为视口百分比长度,与初始包含块的大小相关。
视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin(视口最小长度)和vmax(视口最大长度)。
因此,现在,您的问题可以通过在CSS中添加以下内容轻松解决:
.classname-for-right-div /* You could also use an ID */ {
height: 100vh;
}
以下是有关视口相对长度的信息。
尝试在html和body中设置高度:100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同,请使用或设置父元素display:flex属性。
尝试以下CSS:
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 100%;
}