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

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

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

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

当前回答

您可以使用显示器：flex和高度：100vh

html，正文{高度：100%；边距：0px；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>

2017-10-29 06:55:14

其他回答

与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。

随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。

注意标记和CSS是多么简单。没有桌子黑客之类的。

所有主要浏览器以及IE11+都支持flex模型。

html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>

在这里了解有关flex模型的更多信息。

2013-06-12 14:14:35

有两个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

100vw=视口宽度的100%。

100vh=视口高度的100%。

如果要将div宽度或高度设置为浏览器窗口大小的100%，应使用：

宽度：100vw

高度：100vh

或者，如果您想将其设置得更小，请使用CSS calc函数。例子：

#example {
    width: calc(100vw - 32px)
}

2017-09-27 14:06:06

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

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

会做到这一点。

2009-10-15 21:31:51

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

推荐文章

最新文章

标签