我有一个包含两列的布局-左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/

其他回答

尽管这个解决方案是用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 style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根据需要调整iframe高度属性(将div高度属性保留为100vh)。

为什么80%?在我的真实场景中,我在div中的iframe之前有一个标头,这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%(否则它将是包含div的高度,但从标头之后开始,并溢出div的底部)。

有两个CSS 3测量单位称为:

视口百分比(或视口相对)长度

什么是视口百分比长度?

从上面链接的W3候选推荐:

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时,将相应地缩放它们。

这些单位是vh(视口高度)、vw(视口宽度)、vmin(视口最小长度)和vmax(视口最大长度)。

如何使用分隔符填充浏览器的高度?

对于这个问题,我们可以使用vh:1vh等于视口高度的1%。也就是说,100vh等于浏览器窗口的高度,而不考虑元素在DOM树中的位置:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

这就是我们真正需要的。这里是一个使用中的JSFiddle示例。

哪些浏览器支持这些新单元?

除Opera Mini外,目前所有最新的主要浏览器都支持此功能。我可以使用。。。以获得进一步支持。

如何将其用于多个列?

在手头的问题中,有一个左右分隔符,这里有一个JSFiddle示例,显示了一个包含vh和vw的两列布局。

100vh与100%有何不同?

以该布局为例:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

这里的p标记设置为100%高度,但由于其包含div的高度为200像素,因此200像素中的100%变成200像素,而不是身体高度的100%。改用100vh意味着无论div高度如何,p标签都将是主体的100%高度。看看这个附带的JSFiddle,很容易看出区别!

整个页面称为“视口”,您可以根据CSS 3中的视口设计元素。

这种单位称为视口百分比长度,与初始包含块的大小相关。

视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin(视口最小长度)和vmax(视口最大长度)。

因此,现在,您的问题可以通过在CSS中添加以下内容轻松解决:

.classname-for-right-div /* You could also use an ID */ {
  height: 100vh;
}

以下是有关视口相对长度的信息。

这对我有用:

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 */
}

摘自本页。