CSS 单位 - vh/vw 和 % 有什么区别？

小编典典

CSS 单位 - vh/vw 和 % 有什么区别？

all

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

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

答案具体说

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

%这似乎与更常见的单位完全相同。

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

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

阅读 136

2022-06-23

共1个答案

小编典典

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>

2022-06-23