首先，我們得知道1vh它表示的是當(dāng)前屏幕可見高度的1/100，而1%它表示的是父元素長或者寬的1%（可以這么理解？）

1、對于設(shè)置height:100%;有下面幾種情況：

（1）當(dāng)父元素固定高度，子元素設(shè)置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>

結(jié)果如下：

子元素會自動填充父元素，也就是此時子元素的高度等于父元素的高度，同時我們可以知道，當(dāng)父元素的寬高為0時，子元素的高度也為0，那么整個圖形也就變成下面這個樣了

（2）當(dāng)一個元素內(nèi)部沒有子元素的時候，設(shè)置height:100%;width:100%;，此時該元素高度為0。

（3）當(dāng)一個元素內(nèi)部有固定高度子元素的時候，給這個元素設(shè)置height:100%;width:100%;，那么這個元素自動被子元素高度撐開，例如：

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

結(jié)果如下：

可以看到，父元素是被子元素撐開了，此時父元素的高度就等于子元素的高度。

2、對于設(shè)置height:100vh時有如下的情況：

一個元素設(shè)置height:100vh，那么該元素會被撐開與屏幕高度一致。

（1）即便父元素限制了寬高，只要子元素設(shè)置height:100vh，那么子元素的高度就會和屏幕一樣高

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

結(jié)果如下：

可以看到，子元素設(shè)置height:100vh時，不會被父元素的高度所限制

height:100vh == height:100%;

（2）父元素設(shè)置height:100vh，能夠保證元素?zé)o論是否有沒有內(nèi)容，高度都等于屏幕高度。

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

結(jié)果如下：

同樣的，width:100%和width:100vw的區(qū)別差不多，自己探索去吧

到此這篇關(guān)于CSS中height:100vh和height:100%的區(qū)別的文章就介紹到這了,更多相關(guān)CSS中height:100vh和height:100%內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論