CSS | CSS中height:100vh和height:100%的区别

原创已于 2025-04-13 11:38:04 修改 · 1.8w 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3 #vh #vw #浏览器可见视区

于 2023-06-15 10:25:17 首次发布

CSS 同时被 2 个专栏收录

27 篇文章

订阅专栏

HTML

17 篇文章

订阅专栏

文章详细探讨了CSS中height:100%和100vh的使用场景和效果。当子元素设置height:100%时，其高度会根据父元素的高度调整；而设置100vh则使元素高度等于屏幕可见高度。在不同情况下，如父元素无固定高度、内部是否有子元素等，这两种设置会有不同的表现。此外，文章还介绍了vw单位，它是相对于视窗宽度的百分比单位。

该文章已生成可运行项目，

1、对于设置height:100%;有下面几种情况

2、对于设置height:100vh时有如下的情况

首先，我们得知道1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%

1、对于设置height:100%;有下面几种情况

（1）当父元素固定高度，子元素设置 height:100%;时

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #father {
        width: 300px;
        height: 300px;
        background-color: yellow;
        margin: 20px;
      }

      #son {
        height: 100%;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div id="father">
      <div id="son"></div>
    </div>
  </body>
</html>

结果如下：

子元素会自动填充父元素，也就是此时子元素的高度等于父元素的高度，同时我们可以知道，当父元素的宽高为0时，子元素的高度也为0，那么整个图形也就变成下面这个样了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #father {
        background-color: yellow;
        margin: 20px;
      }

      #son {
        height: 100%;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="father">
      <div id="son"></div>
    </div>
  </body>
</html>

结果如下：

（2）当一个元素内部没有子元素的时候，设置height:100%;width:100%;，此时该元素高度为0。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #father {
        width: 100%;
        height: 100%;
        background-color: yellow;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div id="father">
      <!-- <div id="son"></div> -->
    </div>
  </body>
</html>

（3）当一个元素内部有固定高度子元素的时候，给这个元素设置height:100%;width:100%;，那么这个元素自动被子元素高度撑开，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #father {
        width: 100%;
        height: 100%;
        background-color: yellow;
        margin: 20px;
      }

      #son {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="father">
      <div id="son"></div>
    </div>
  </body>
</html>

结果如下：

可以看到，父元素是被子元素撑开了，此时父元素的高度就等于子元素的高度。

2、对于设置height:100vh时有如下的情况

一个元素设置height:100vh，那么该元素会被撑开与屏幕高度一致。

（1）即便父元素限制了宽高，只要子元素设置height:100vh，那么子元素的高度就会和屏幕一样高

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #father {
        width: 500px;
        height: 200px;
        background-color: yellow;
        margin: 20px;
      }

      #son {
        height: 100vh;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="father">
      <div id="son"></div>
    </div>
  </body>
</html>

结果如下：

可以看到，子元素设置height:100vh时，不会被父元素的高度所限制。height:100vh == height:100%;

（2）父元素设置height:100vh，能够保证元素无论是否有没有内容，高度都等于屏幕高度。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #father {
        width: 500px;
        height: 100vh;
        background-color: yellow;
        margin: 20px;
      }

      #son {
        height: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="father">
      <div id="son"></div>
    </div>
  </body>
</html>

结果如下：