202

我刚刚了解了一个新的和不常见的 CSS 单元。vh并vw分别测量视口的高度和宽度的百分比。

我从 Stack Overflow 上查看了这个问题，但它使单位看起来更加相似。

vw 和 vh 单元如何工作

答案具体说

vw 和 vh 分别是窗口宽度和高度的百分比：100vw 是宽度的 100%，80vw 是 80%，以此类推。

%这似乎与更常见的单位完全相同。

在开发人员工具中，我尝试将值从 vw/vh 更改为 %，反之亦然，得到了相同的结果。

两者有区别吗？如果不是，为什么要引入这些新单位CSS3？

4

7 回答 7

227

100%可以是100%任何东西的高度。例如，如果我有一个很高的父母和一个身高的孩子div，那么理论上这个孩子可能比视口的高度高得多，或者比视口的高度小得多，即使它设置为高度。1000pxdiv100%divdiv100%

如果我改为将该子级div设置为100vh，那么它只会填充100%视口的高度，而不一定是父级div。

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}
<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

于 2015-06-25T02:02:00.560 回答
59

我知道这个问题很老了，@Josh Beam 解决了最大的不同，但还有另一个问题：

假设您有一个想要填充整个视口的<div>直接子级，因此您使用. 在您添加更多内容并显示垂直滚动条之前，这一切都一样。由于滚动条占视口的一部分，因此会比. 这种微小的差异最终会添加一个水平滚动条（用户需要看到额外的宽度），因此，两种情况下的高度也会略有不同。<body>width: 100vw; height: 100vh;width: 100%; height: 100vh;vwwidth: 100vw;width: 100%;

在决定使用哪一个时必须考虑到这一点，即使父元素大小与文档视口大小相同。

例子：

使用width:100vw;：

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

使用width:100%;：

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

于 2017-12-05T11:43:31.050 回答
3

感谢您的回答和代码示例，@IanC。这对我帮助很大。澄清一下：我相信您在写“侧边栏”时是指“滚动条”。

以下是一些关于视口单元计数滚动条的相关讨论，我也发现它们很有帮助：

vw、vh、vmin、vmax 单位（“视口百分比长度”）的W3C 规范说“假定不存在任何滚动条”。

显然 Firefox 从 100vw 中减去滚动条宽度，正如 @Nolonar在 Width:100% 和 width:100vw 之间的差异上的评论？观察，引用“我可以使用”。

Can I Use，也许与规范（？）有矛盾，说除 Firefox 之外的所有浏览器目前都“错误地”认为 100vw 是整个页面宽度，包括垂直滚动条。

于 2018-05-19T00:18:30.167 回答
2

整个视口宽度的百分比。10vw 将解析为当前视口宽度的 10%，或者在 480 像素宽的手机上为 48 像素。% 和 vw 之间的差异与 em 和 rem 之间的差异最相似。

% 长度是相对于本地上下文（包含元素）的宽度，而 vw 长度是相对于浏览器窗口的整个宽度。

于 2021-07-24T07:39:24.793 回答
1

存在未必提出的差异。100vw 包括滚动条的宽度，而 100% 不包括它。这是一个很小的差异，但在进行设计时很重要。

于 2019-07-17T20:05:21.933 回答
1

% 和 vw 之间的差异与 em 和 rem 之间的差异最相似。% 长度相对于本地上下文（包含元素）宽度，而 vw 长度相对于浏览器窗口的整个宽度。

于 2021-04-04T06:21:04.563 回答
1

vw（视图宽度）和 vh（视图高度）单位与视口大小有关，其中 100vw 或 vh 是视口宽度/高度的 100%。

例如，如果一个视口是 1600 像素宽，而您指定的东西是 2vw，那将相当于视口宽度的 2%，即 32 像素。

% 单位总是基于当前元素的父元素宽度

于 2018-04-26T09:57:25.367 回答