如何使div的高度达到浏览器窗口的100%

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

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

我尝试过高度：100%，最小高度：100%；，等

当前回答

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

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

会做到这一点。

2009-10-15 21:31:51

其他回答

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

2018-08-22 10:48:35

其中一个选项是使用CSS表。它具有强大的浏览器支持，甚至可以在Internet Explorer 8中工作。

JSFiddle示例

html，正文{高度：100%；边距：0；}.容器{显示：表格；宽度：100%；高度：100%；}.左，.右{显示：表格单元格；宽度：50%；}.对{背景：灰色；}<div class=“container”><div class=“left”></div><div class=“right”></div></div>

2016-01-25 17:36:46

这就是对我有用的：

<div style=“位置：固定；顶部：0px；左侧：0px，底部：0px

使用position:fixed而不是position:absolute，这样即使向下滚动分区也会扩展到屏幕的末尾。

2013-07-27 16:18:36

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

2013-05-30 13:33:35

尝试在身体上使用“height:100%”。

2023-02-07 07:26:16

如何使div的高度达到浏览器窗口的100%

推荐文章

最新文章

标签