CSS单位-vh / vw和％之间有什么区别？

138

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

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

大众汽车和大众汽车部门如何运作

答案专门说

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

这似乎与%单位完全相同，这很常见。

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

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

css viewport-units

— 理查德·汉密尔顿
source

7

vw / vh的作用是消除对任何父对象的依赖，并允许根据视口大小进行大小调整。

— 贴纸

2

各位读者，IanC的答案很可能会节省您的时间，请务必检查一下。

— Skippy le Grand Gourou

167

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>

展开摘要

— 乔希·比姆（Josh Beam）
source

我有一个侧栏，该侧栏嵌套在引导程序“行”中，即使将高度设置为100％，也无法使其完整页面大小。对我有用的是100vh

— raghav710 '17

27

我知道这个问题已经很老了，@ 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>

展开摘要

— IanC
source

2

CSS body { overflow: hidden }将导致滚动条不显示。

— Dave F

2

感谢您的回答和代码示例@IanC。这对我帮助很大。澄清：我相信您在写“补充工具栏”时意为“滚动条”。

这是一些有关对视口单位计数滚动条的相关讨论，我也认为这很有帮助：

W3，VH，VMIN，VMAX单位（“视口百分比长度”）的W3C规范指出“假定不存在任何滚动条”。

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

我是否可以使用，也许会与规格（？）产生冲突？我说，除Firefox外，当前所有其他浏览器都“错误地”将100vw视为包括垂直滚动条在内的整个页面宽度。

— 懈怠
source

1

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

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

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

0

并不一定会引起区别。100vw包括木棒的宽度，而100％不包括。差异很小，但在进行设计时很重要。

1

IanC的答案确实如此。“由于大众将滚动条作为视口的一部分，所以宽度：100vw；将略大于宽度：100％；。”

— j08691