首页 前端知识 CSS | CSS中height:100vh和height:100%的区别

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

2024-06-24 23:06:17 前端知识 前端哥 42 55 我要收藏

目录

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>

结果如下:

同样的,width:100%width:100vw的区别差不多,大家可以自行去探索。

📐 扩展:尺寸单位 vh 和 vw

vh 是相对于视窗的高度,那么相对应的 vw 则是相对于视窗的宽度

“视区”所指为浏览器内部的可视区域大小,即window.innerWidth window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

vh就是当前屏幕可见高度的1%,也就是height:100vh == height:100%,但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,但是设置height:100vh,该元素会被撑开屏幕高度一致。

vw就是当前屏幕宽度的1%,补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,但是100vw是相对于屏幕可见宽度来设置的,所以,会出现50vw 比50%大的情况。


相关参考资料:htm文档中html和body标签的默认尺寸是多少?

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13444.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!