前言
给父元素一个min-height,子元素设置height:100%。
代码
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1{width: 100%;min-height: 50px;background-color: yellow;} #sp1{width: 20%;height: 100%;display: inline-block;background-color: blue;} #sp2{width: 50%;height: 100%;display: inline-block;background-color: red;} </style> </head> <body> <div id="div1"> <span id="sp1">aaa</span> <spanv id="sp2">bbb</span> </div> </body> </html>
结果
发现子元素高度并没有撑开,如下图:
如果我们稍作改变,将父元素的min-height改为height,子元素高度就会撑开,如下图:
剖析
min-height表示盒子的最小高度,并不表示盒子的最终高度,站在外部盒子的角度理解是外部最终高度是由盒子的内部元素的高度与当前盒子的最小高度共同决定。
在外部盒子等待内部元素计算出高度时并不知道自己的高度,内部盒子高度相对外部盒子设置高度时也未知外部高度,所以按照自己的内容的情况渲染了,最终的效果就是内部盒子高度与外部无关。
结论
子元素的 height
或是 min-height
是否生效,基于父元素是否设置了固定高度或者是一个有效百分比高度。