我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
这对我有用:
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 */
}
摘自本页。
其他回答
使用FlexBox CSS
Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名,但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中,并选择要展开的部分。它们将自动占用容器中的所有可用空间。
尽管这个解决方案是用jQuery完成的,但我认为它可能对任何人来说都是有用的,因为任何人都可以根据屏幕大小制作列。
对于从页面顶部开始的列,此解决方案是最简单的。
body, html {
height: 100%;
}
div#right {
height: 100%
}
对于不从页面顶部开始的列(例如:如果它们从页眉下方开始)。
<script>
$(document).ready(function () {
var column_height = $("body").height();
column_height = column_height - 100; // 100 is the header height
column_height = column_height + "px";
$("#column").css("height",column_height);
});
</script>
第一种方法将主体高度应用于它和列,这意味着starting_pixels+height100%。
第二种方法通过获取正文的高度来获取显示给用户的页面高度,然后减去页眉大小,以了解显示该列的剩余高度。
最简单:
html,正文{高度:100%;最小高度:100%;}正文{位置:相对;背景:紫色;边距:0;填充:0;}.全高{显示:块;位置:相对;背景:红色;高度:100%;宽度:300px;}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>
在这种情况下,可以使用vh,它是相对于视口高度的1%。。。
这意味着,如果你想掩盖高度,只需使用100vh。
请看下面我在这里为您绘制的图像:
尝试我为您创建的代码段,如下所示:
.左侧{高度:100vh;宽度:50%;背景色:灰色;浮动:左侧;}.对{高度:100vh;宽度:50%;背景色:红色;浮动:右侧;}<div class=“left”></div><div class=“right”></div>
以下内容与您之前的回答不完全相同,但可能对某些人有所帮助:
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/