我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
默认情况下,块元素使用其父元素的整个宽度。
这就是它们如何满足垂直堆叠的设计要求。
9.4.1块格式化上下文在块格式化上下文中,垂直,从包含块的顶部开始。
然而,这种行为不会延伸到高度。
默认情况下,大多数元素都是其内容的高度(高度:auto)。
与宽度不同,如果需要额外空间,则需要指定高度。
因此,请记住以下两点:
除非需要全宽,否则需要定义块元素的宽度除非需要内容高度,否则需要定义元素的高度
.联系人{显示:flex;/*默认情况下为全宽*/最小高度:100vh;/*至少使用视口的全高度*/}.左侧{弹性:0 0 60%;背景色:番茄;}.对{挠曲:1;背景色:粉色;}body{margin:0;}/*删除默认边距*/<div class=“联系人”><section class=“left”><div class=“”><h1>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</h1></div></section><section class=“right”><img/></section></div>
其他回答
你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
来源
尝试一下。。。
* {填充:0;边距:0;}.父目录{溢出:隐藏;清晰:两者都有;颜色:#FFF;文本对齐:居中;}.left_div{浮动:左侧;高度:100vh;宽度:50%;背景色:蓝色;}.右_右{浮动:右侧;高度:100vh;宽度:50%;背景色:绿色;}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>
默认情况下,块元素使用其父元素的整个宽度。
这就是它们如何满足垂直堆叠的设计要求。
9.4.1块格式化上下文在块格式化上下文中,垂直,从包含块的顶部开始。
然而,这种行为不会延伸到高度。
默认情况下,大多数元素都是其内容的高度(高度:auto)。
与宽度不同,如果需要额外空间,则需要指定高度。
因此,请记住以下两点:
除非需要全宽,否则需要定义块元素的宽度除非需要内容高度,否则需要定义元素的高度
.联系人{显示:flex;/*默认情况下为全宽*/最小高度:100vh;/*至少使用视口的全高度*/}.左侧{弹性:0 0 60%;背景色:番茄;}.对{挠曲:1;背景色:粉色;}body{margin:0;}/*删除默认边距*/<div class=“联系人”><section class=“left”><div class=“”><h1>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</h1></div></section><section class=“right”><img/></section></div>
即使有了这里的所有答案,我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度,当内容超过一页时,布局就会中断。如果我改用100%高度/分钟高度,当内容小于页面高度时,布局会中断。
我找到的解决方案(解决了这两种情况)是结合前两个答案:
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
尝试在身体上使用“height:100%”。