CSS单位- vh/vw与百分比的区别是什么？

Question

CSS单位- vh/vw与百分比的区别是什么？

cssviewport-units

246

我刚学习了一个新的、不太常见的CSS单位。 vh 和 vw 分别测量视口高度和宽度的百分比。

我看过来自 Stack Overflow 的这个问题，但它让这两个单位看起来更加相似。

vw 和 vh 单位如何工作？

回答中明确提到：

vw 和 vh 分别是窗口宽度和高度的百分比：100vw 是宽度的100％，80vw 是80％等等。

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

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

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

- Richard Hamilton

22

vw/vh 的作用是消除对于任何父级元素的依赖性，可以根据视口大小进行尺寸调整。 - Stickers

4

亲爱的读者，IanC的回答可能会挽救您的一天，请务必查看。 - Skippy le Grand Gourou

7个回答

76

我知道这个问题很老，@Josh Beam已经提到了最大的差异，但还有另一个差异：

假设您有一个作为<body>直接子元素的<div>，您希望它填充整个视口，因此使用width: 100vw; height: 100vh;。一切都与width: 100％; height: 100vh;相同，直到您添加更多内容和垂直滚动条出现。由于vw将滚动条视为视口的一部分，width: 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>

- IanC

4

CSS中的body { overflow: hidden }会导致滚动条不显示。 - Dave F

2

@DaveF 如果您的页面超出了视口并且您想要垂直滚动效果，那么您将无法滚动。 body { overflow-x: hidden } 应该没问题。 - KMA Badshah

9

视口宽度百分比。10vw 将解析为当前视口宽度的 10%，在宽度为 480px 的手机上为 48px。% 和 vw 的差别与 em 和 rem 的差别最为相似。

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

- Yazan Najjar

3

感谢您的回答和代码示例，@IanC。它对我很有帮助。澄清一下：我认为您在写“sidebar”时实际指的是“scrollbar”。

以下是我发现有用的关于视口单位计算滚动条的相关讨论：

- 为什么vw包括滚动条作为视口的一部分？ - 当出现垂直滚动条时，使用100vw会导致水平裁剪 - 防止100vw创建水平滚动 - width:100%和width:100vw之间的区别是什么？

这里的 W3C规范是关于vw、vh、vmin和vmax单位（即“视口百分比长度”）的，规范中指出“假定不存在任何滚动条”。

显然，Firefox会从100vw中减去滚动条的宽度，正如@Nolonar在Width:100%与width:100vw之间的区别？中所述，引用了“Can I Use”的数据。

Can I Use（也许与规范存在矛盾？）指出，除Firefox外的所有浏览器目前“错误地”将100vw视为包括垂直滚动条在内的整个页面宽度。

- Slack Undertow

1

有一个可能尚未提到的区别。100vw 包括滚动条的宽度，而 100% 不包括。这是一个小差异，但在设计中非常重要。

- user8388657

1

IanC的回答是：“由于vw将滚动条视为视口的一部分，因此width: 100vw;会比width: 100％略大。” - j08691

1

vw（视窗宽度）和vh（视窗高度）单位与视口大小相关，其中100vw或vh为视口宽度/高度的100％。

例如，如果视口宽度为1600px，并且您将某些内容指定为2vw，则相当于视口宽度的2％，即32px。

%单位始终基于当前元素的父元素宽度。

- user7135071

1

% 和 vw 的区别与 em 和 rem 的区别最为相似。% 长度相对于本地上下文（包含元素）的宽度，而 vw 长度相对于浏览器窗口的完整宽度。

- Hamid Shoja

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Beam · Accepted Answer

100% 可以是任何东西的 100% 高度。例如，如果我有一个父级 div 的高度为 1000px，并且一个子级 div 的高度设置为 100%，那么该子级 div 理论上可以比视口的高度要高得多，或者比视口的高度要小得多，尽管该 div 设置了 100% 的高度。

如果我改为将该子级 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>