我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
以下内容与您之前的回答不完全相同,但可能对某些人有所帮助:
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
}
#one {
background-color: red;
}
#two {
margin-top: 0px;
background-color: black;
color: white;
overflow-y: scroll;
}
https://jsfiddle.net/newdark/qyxkk558/10/
其他回答
添加最小高度:100%,不指定高度(或将其设置为自动)。它完全帮了我的忙:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
来源
最简单:
html,正文{高度:100%;最小高度:100%;}正文{位置:相对;背景:紫色;边距:0;填充:0;}.全高{显示:块;位置:相对;背景:红色;高度:100%;宽度:300px;}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>
尝试在html和body中设置高度:100%
html,
body {
height: 100%;
}
如果您想要2个div高度相同,请使用或设置父元素display:flex属性。
这对我有用:
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 */
}
摘自本页。