我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。

我尝试过高度:100%,最小高度:100%;,等


当前回答

如果你能绝对定位你的元素,

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

其他回答

实际上,对我最有效的是使用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);
}

有两个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,很容易看出区别!

如果你能绝对定位你的元素,

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

100%对于宽度和高度的作用不同。

当您指定width:100%时,意味着“从父元素或窗口的宽度中占用可用宽度的100%”

当您指定height:100%时,它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度,则所有子元素的高度将为0或父元素的高度,这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。

我总是指定车身的最小高度为100vh,这使得定位和计算变得容易,

body {
  min-height: 100vh;
}

尝试在html和body中设置高度:100%

html, 
body {
    height: 100%;
}

如果您想要2个div高度相同,请使用或设置父元素display:flex属性。