协慌网

 登录 贡献 社区

如何使 div 100％的浏览器窗口高度？

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

右边的div有一个灰色的background-color ，我需要它根据用户浏览器窗口的高度垂直展开。现在， background-color在该div的最后一段内容结束。

我试过height:100% ， min-height:100%;等等

答案

有几个 CSS3 测量单位称为：

视口百分比（或视口相对）长度

什么是视口 - 百分比长度？

从以上链接的 W3 候选推荐标准：

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。

这些单位是vh （视口高度）， vw （视口宽度）， vmin （视口最小长度）和vmax （视口最大长度）。

如何使用它来使分隔符填满浏览器的高度？

对于这个问题，我们可以使用vh ： 1vh等于视口高度的 1％。也就是说，无论元素在 DOM 树中的位置如何， 100vh都等于浏览器窗口的高度：

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％ body高度。使用100vh代替意味着无论div高度如何， p标签都将是body 100％高度。看看这个随附的 JSFiddle，可以轻松看到差异！

如果要设置<div>或任何元素的高度，则应将<body>和<html>的高度设置为 100％。然后你可以用 100％设置元素的高度:)

这是一个例子： 

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

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

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

会这样做的。