• 客服QQ:1193846053   微信:suyoufuwu   联系电话:13080553467     

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

速优网络(10年经验),服务数万家企业,固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司,专业团队,值得选择!建站业务:企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站 客服微信【suyoufuwu】


首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?)

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

(1)当父元素固定高度,子元素设置height:100%;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  #father1 {
    width: 300px;
    height: 300px;
    background-color: yellow;
    margin: 20px;
  }
 
  #son1{
    height: 100%;
    background-color: blue;
  }
</style>
 
<div id="father1">
  <div id="son1"></div>
</div>

结果如下:

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  #father1 {
    width: 100%;
    background-color: yellow;
    margin: 20px;
  }
 
  #son1{
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
 
<div id="father1">
  <div id="son1"></div>
</div>

结果如下:

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  #father1 {
    width: 300px;
    height: 300px;
    background-color: yellow;
    margin: 20px;
  }
 
  #son1 {
    height: 100vh;
    background-color: blue;
  }
</style>
 
<div id="father1">
  <div id="son1"></div>
</div>

结果如下:

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

height:100vh == height:100%;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  #father1 {
    width: 300px;
    height: 100vh;
    background-color: yellow;
    margin: 20px;
  }
 
  #son1 {
    height: 300px;
    background-color: blue;
  }
</style>
 
<div id="father1">
  <div id="son1"></div>
</div>

结果如下:

同样的,width:100%width:100vw的区别差不多,自己探索去吧


以上就是速优网络和大家分享的"CSS中height:100vh和height:100%的区别",非常感谢您有耐心的读完这篇文章,我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供:企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务,本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作,请扫码咨询,我们将诚挚为您服务。

TAG标签:

全国分站

全国分站