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

2018-05-31 12:08:27

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

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

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

有几个CSS3测量单位称为：

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

从上面链接的W3候选人建议：

视口百分比长度是相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，会相应地缩放。

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

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

<div></div>

div {
    height:100vh;
}

这实际上是所有需要的。这是一个JSFiddle的例子 。

除了Opera Mini以外，所有最新的主流浏览器都支持该功能。退房我可以使用......获得进一步支持。

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

以此布局为例：

<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;

会做到这一点。

链接地址: http://www.djcxy.com/p/7137.html