剖析height百分比和min-height百分比

height的百分比

当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效.

<div id="container1">
    <div id="wrap">
        wrap's height work
    </div>
</div>
<br>
<div id="container2">
    <div id="wrap2">
        wrap2's height doesn't work
    </div>
</div>

#container1 {
  height: 100px;
  background-color: red;
}
#wrap {
  height: 50%;
  background-color: green;
}
 
#container2 {
}
 
#wrap2 {
 
/*该height属性无效,因为其父元素没有一个明确的高度*/
height: 50%;
background-color: green;
}

子元素的百分比高度也可以基于父元素的百分比高度,前提是父元素的父元素必须有一个明确的高度:

<div id="#container">
    <div id="wrap">
      <div id="content">
        content's percent height work only when does the wrap'height work
     </div>
   </div>
<div/>

#container {
  height: 500px;
}
 
#wrap {
  height: 100%;
}
 
#content {
  height: 50%;
}

但是,我们应该尽量避免这种多层百分比高度嵌套的风格.

min-height的百分比

再说说min-height吧.设置min-height的元素即使内容的高度很少时也能撑开到min-height设置的高度;当内容的高度大于min-height时就设置为内容的高度.

要使min-height的百分比值生效,其父元素的height值必须为一个固定的高度或者是一个有效的百分比高度.

值得注意的是,父元素设置了有效的min-height但没有设置height属性时,子元素的height和min-height的百分比不会生效.因为设置height和min-height必须基于一个设置了固定高度或者是一个有效百

分比高度的父元素.

<div id="container1">
    <div id="wrap">
        wrap's min-height work
    </div>
</div>
<br>
<div id="container2">
    <div id="wrap2">
        wrap2's min-height doesn't work
    </div>
</div>

        #container1 {
            height: 100px;
            background-color: red;
        }
        #wrap {
            /*该min-height生效,因为其父元素设置了有效height属性*/
            min-height: 50%;
            background-color: green;
        }
 
        #container2 {
            min-height: 100px;
        }
 
        #wrap2 {
            /*该min-height无效,因为其父元素没有设置有效的height属性(即使设置了min-height属性)*/
            min-height: 50%;
        } 

总结

height百分比生效基于最近的父元素有明确的高度值

min-height百分比生效基于父元素的height有固定的高度值或有效的百分比高度