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

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

（1）當(dāng)父元素固定高度，子元素設(shè)置height:100%;時(shí)

<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é)果如下：

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

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

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

<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é)果如下：

可以看到，父元素是被子元素?fù)伍_了，此時(shí)父元素的高度就等于子元素的高度。

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

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

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

<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時(shí)，不會(huì)被父元素的高度所限制

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論