我刚刚了解了一个新的不常见的CSS单元。vh
并分别vw
测量视口的高度和宽度百分比。
我从Stack Overflow看了这个问题,但它使单元看起来更加相似。
答案专门说
vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%,依此类推。
这似乎与%
单位完全相同,这很常见。
在开发人员工具中,我尝试将值从vw / vh更改为%,反之亦然,并得到相同的结果。
两者之间有区别吗?如果没有,为什么要引入这些新单位CSS3
?
我刚刚了解了一个新的不常见的CSS单元。vh
并分别vw
测量视口的高度和宽度百分比。
我从Stack Overflow看了这个问题,但它使单元看起来更加相似。
答案专门说
vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%,依此类推。
这似乎与%
单位完全相同,这很常见。
在开发人员工具中,我尝试将值从vw / vh更改为%,反之亦然,并得到相同的结果。
两者之间有区别吗?如果没有,为什么要引入这些新单位CSS3
?
Answers:
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解决了最大的区别,但是还有另一个问题:
假设您要填充整个视口,则有个<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>
body { overflow: hidden }
将导致滚动条不显示。
感谢您的回答和代码示例@IanC。这对我帮助很大。澄清:我相信您在写“补充工具栏”时意为“滚动条”。
这是一些有关对视口单位计数滚动条的相关讨论,我也认为这很有帮助:
W3,VH,VMIN,VMAX单位(“视口百分比长度”)的W3C规范指出“假定不存在任何滚动条”。
显然,Firefox从100vw中减去滚动条宽度,就像@Nolonar 在Width:100%和width:100vw之间的差异上的评论一样?观察,引用“我可以使用”。
我是否可以使用,也许会与规格(?)产生冲突?我说,除Firefox外,当前所有其他浏览器都“错误地”将100vw视为包括垂直滚动条在内的整个页面宽度。
vw(视图宽度)和vh(视图高度)单位与视口大小有关,其中100vw或vh是视口宽度/高度的100%。
例如,如果某个视口的宽度为1600px,而您指定的内容为2vw,则相当于该视口宽度的2%,即32px。
%单位始终基于当前元素的父元素宽度
并不一定会引起区别。100vw包括木棒的宽度,而100%不包括。差异很小,但在进行设计时很重要。