[分享]css中100%和100vh区别

在CSS中，100和100vh这两个单位常常用于设置宽度或高度。但是，这两个单位的具体含义是不同的。100是相对于容器的宽度或高度来计算的。比如，如果某个元素的宽度设置为100，那么它会占据父元素的整...

在CSS中，100%和100vh这两个单位常常用于设置宽度或高度。但是，这两个单位的具体含义是不同的。

100%是相对于容器的宽度或高度来计算的。比如，如果某个元素的宽度设置为100%，那么它会占据父元素的整个宽度。同理，如果高度设置为100%，那么它会占据父元素的整个高度。

代码示例：
.parent {
  width: 500px;
  height: 300px;
}
.child {
  width: 100%;
  height: 100%;
}

在上述代码中，child元素的宽度和高度都设置为100%，它会占据parent元素的整个宽度和高度。

而100vh表示视口的高度。视口就是浏览器中用于显示网页内容的区域，也就是可见区域。比如，如果某个元素的高度设置为100vh，那么它会占据整个浏览器窗口的高度。

代码示例：
.child {
  height: 100vh;
}

在上述代码中，child元素的高度设置为100vh，它会占据整个浏览器窗口的高度。

总之，100%是相对于父元素的宽度或高度，而100vh是相对于浏览器窗口的高度。使用时需要根据具体需求选择不同的单位。