我刚刚了解了一个新的和不常见的CSS单元。Vh和vw分别测量视口高度和宽度的百分比。
我从Stack Overflow中看到了这个问题,但它让单位看起来更加相似。
vw和vh单位是如何工作的
答案明确地说
Vw和vh是窗宽和窗高的百分比,
分别为:100vw为宽度的100%,80vw为宽度的80%,等等。
这似乎与%单位完全相同,后者更常见。
在开发人员工具中,我尝试将值从vw/vh更改为%,反之亦然,得到了相同的结果。
这两者之间有什么区别吗?如果不是,为什么这些新单位被引入到CSS3?
100%可以是任何物体高度的100%。例如,如果我有一个1000px高的父div,和一个100%高的子div,那么这个子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>
谢谢你的回答和代码示例,@IanC。这对我帮助很大。澄清一下:我相信你说的“边栏”指的是“滚动条”。
下面是一些关于视口单元计算滚动条的相关讨论,我认为这些讨论也很有帮助:
为什么vw包含滚动条作为视口的一部分?
当存在垂直滚动条时,使用100vw会导致水平裁剪
防止100vw产生水平滚动
宽度:100%和宽度:100vw?
vw, vh, vmin, vmax单位(“视口百分比长度”)的W3C规范说“任何滚动条都假定不存在”。
显然,Firefox从100vw中减去了滚动条宽度,正如@Nolonar在width: 100%和width:100vw之间的差异上的评论?他引用了“我可以使用吗?”
可能与规范(?)相矛盾的是,除了Firefox之外的所有浏览器目前都“错误地”认为100vw是包括垂直滚动条在内的整个页面宽度。