我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
尽管这个解决方案是用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%。
第二种方法通过获取正文的高度来获取显示给用户的页面高度,然后减去页眉大小,以了解显示该列的剩余高度。
其他回答
如果你能绝对定位你的元素,
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
如果将html和body_height设置为100%,它将覆盖整个页面。
如果您将任何特定的div最小高度设置为100%,那么它将覆盖整个窗口,如下所示:
CSS
html, body {
height: 100%;
}
div#some-div {
min-height: 100%;
}
回想起
只有当div的直接父级是body时,这才有效,因为百分比总是从直接父级继承的,通过执行上面的CSS代码,您告诉div从直接父(body)继承100%的高度,并使其成为您的最小高度:100%。
另一种方式
只需将div高度设置为100vh。这意味着视口高度为100。
CSS
div#some-div {
height: 100vh
}
实际上,对我最有效的是使用vh属性。
在我的React应用程序中,我希望即使调整大小,div也能与页面高度匹配。我尝试了高度:100%;,溢出-y:自动;,但在设定高度时,它们都不起作用:(你的百分比)vh;它按预期工作。
注意:如果您正在使用填充、圆角等,请确保从vh属性百分比中减去这些值,否则会增加额外的高度并显示滚动条。这是我的示例:
.frame {
background-color: rgb(33, 2, 211);
height: 96vh;
padding: 1% 3% 2% 3%;
border: 1px solid rgb(212, 248, 203);
border-radius: 10px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。
您只需设置高度:100%。
html,正文{高度:100%;边距:0;}.内容{高度:100%;最小高度:100%;位置:相对;}.剩余内容{高度:自动;最小高度:100%;浮动:左侧;背景:#ddd;宽度:50%;位置:相对;}#一个{背景:url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png)中央无重复滚动#aaa;宽度:50%;位置:相对;浮动:左侧;}#两个{背景:url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png)中央无重复滚动#520E24;宽度:50%;浮动:左侧;位置:相对;overflow-y:滚动;}<div class='content'id='one'></div><div class='content-left'id='wo'></div>
你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
来源