CSS单位 - vh/vw和%之间有什么区别？
Ric*_*ton 109 css viewport-units
我刚刚了解了一个新的,不常见的CSS单元.vh并分别vw测量视口高度和宽度的百分比.
我从Stack Overflow看了这个问题,但它使单位看起来更相似.
答案具体说明了
vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%等.
这看起来与%单位完全相同,这更常见.
在Developer Tools中,我尝试将值从vw/vh更改为%而反之亦然,并获得相同的结果.
这两者有区别吗？如果没有,为什么要引入这些新单位CSS3？
Jos*_*eam 140
100%可以是100%任何东西的高度.举例来说,如果我有一个父div那是1000px高大的,小时候div是在100%高度,那么这个孩子div可能理论上比视,或小于视口的高度小得多的高度高得多,即使是div设置在100%身高.
如果我改为将该子div设置为100vh,那么它只会填充100%视口的高度,而不一定是父视图的高度div.
看到这个jsfiddle:
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;
}Ian*_*anC 23
我知道问题已经很久了,@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>- CSS `body { overflow: hidden }` 将导致不显示滚动条。 (3认同)
- @DaveF，那么如果您的页面超出视口并且您想要垂直滚动效果，您将无法滚动。`body { Overflow-x: hide }` 应该没问题 (2认同)
整个视口宽度的百分比。10vw 将解析为当前视口宽度的 10%，或者在宽度为 480 像素的手机上解析为 48 像素。% 和 vw 之间的差异与 em 和 rem 之间的差异最相似。
% 长度相对于本地上下文（包含元素）宽度，而 vw 长度相对于浏览器窗口的整个宽度。