CSS单位-vh / vw和%之间有什么区别?


138

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

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

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

答案专门说

vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%,依此类推。

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

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

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


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

2
各位读者,IanC的答案很可能会节省您的时间,请务必检查一下。
Skippy le Grand Gourou

Answers:


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>


我有一个侧栏,该侧栏嵌套在引导程序“行”中,即使将高度设置为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>


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

2

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

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

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

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

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


1

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

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

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


0

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


1
IanC的答案确实如此。“由于大众将滚动条作为视口的一部分,所以宽度:100vw;将略大于宽度:100%;。”
j08691
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.