CSS 单位 - vh/vw 和 % 有什么区别？

Question

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

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

How does vw and vh unit works

答案具体说

vw and vh are a percentage of the window width and height, respectively: 100vw is 100% of the width, 80vw is 80%, etc.

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

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

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

Answer 1

100% 可以是任意高度的 100%。例如，如果我有一个 parent div 高 1000px 和一个 child div 高 100%，那么 child div 理论上可以比视口的高度高很多，或者比视口的高度小很多， 即使 div 设置为 [=12] =]身高.

如果我改为将 child div 设置为 100vh，那么它将 仅填充 100% 的高度viewport，不一定是 parent 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>

Answer 2

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

假设您有一个 <div>，<body> 的直接子项，您想要填充整个视口，因此您使用 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>

Answer 3

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

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

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

Answer 4

感谢@IanC 的回答和代码示例。这对我帮助很大。澄清一下：我相信你写 "sidebar."

时的意思是 "scrollbar"

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

Using 100vw causes horizontal cropping when vertical scrollbars are present
Difference between Width:100% and width:100vw?

vw、vh、vmin、vmax 单位（"viewport percentage lengths"）的 W3C spec 表示 "any scrollbars are assumed not to exist"。

显然 Firefox 从 100vw 中减去滚动条宽度，正如@Nolonar 在 Difference between Width:100% and width:100vw? 的评论所观察到的，引用 "Can I Use"。

Can I Use，可能与规范 (?) 存在紧张关系，表示当前除 Firefox 之外的所有浏览器 "incorrectly" 都将 100vw 视为整个页面宽度，包括垂直滚动条。

Answer 5

有区别不一定提出来。 100vw 包括滚动条的宽度，而 100% 则不包括它。这是一个很小的差异，但在设计时很重要。

Answer 6

%和vw的区别最类似于em和rem的区别。 % 长度是相对于本地上下文（包含元素）的宽度，而 vw 长度是相对于浏览器的整个宽度 window.

Answer 7

整个视口宽度的百分比。 10vw 将解析为当前视口宽度的 10%，或者在 480px 宽的 phone 上为 48px。 %和vw的区别最类似于em和rem的区别

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

CSS 单位 - vh/vw 和 % 有什么区别？

CSS Units - What is the difference between vh/vw and %?

css

viewport-units