我有一个包含两列的布局-左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;
}
以下是有关视口相对长度的信息。
其他回答
您可以使用以下CSS使div达到浏览器窗口高度的100%:
display: block;
position: relative;
bottom: 0;
height: 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%。
第二种方法通过获取正文的高度来获取显示给用户的页面高度,然后减去页眉大小,以了解显示该列的剩余高度。
如果要设置<div>或任何元素的高度,也应该将<body>和<html>的高度设置为100%。然后可以将元素的高度设置为100%:)
下面是一个示例:
body, html {
height: 100%;
}
#right {
height: 100%;
}
有几种方法可用于将<div>的高度设置为100%。
方法(A):
html,正文{高度:100%;最小高度:100%;}.div左{高度:100%;宽度:50%;背景:绿色;}.div右{高度:100%;宽度:50%;背景:灰色;}<div class=“div left”></div><div class=“div right”></div>
方法(B)使用vh:
html,正文{高度:100%;最小高度:100%;}.div左{高度:100vh;宽度:50%;背景:绿色;浮动:左侧;}.div右{高度:100vh;宽度:50%;背景:灰色;浮动:右侧;}<div class=“div left”></div><div class=“div right”></div>
方法(c)使用挠性箱:
html,正文{高度:100%;最小高度:100%;}.包装器{高度:100%;最小高度:100%;显示:柔性;}.div左{宽度:50%;背景:绿色;}.div右{宽度:50%;背景:灰色;}<div class=“wrapper”><div class=“div left”></div><div class=“div right”></div></div>
您可以使用显示器:flex和高度:100vh
html,正文{高度:100%;边距:0px;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>