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

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

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

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

<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>

 

 

 

<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>

 

 

<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>

 

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

 

<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的区别差不多，自己探索去吧