前言
給父元素一個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 百分比是否生效，基於父元素是否設置了固定高度或者是一個有效百分比高度，總結來說就是一個有效高度！！！
參考：剖析height百分比和min-height百分比
補充【2019-10-26】：
對子元素設置決定定位也可行即position:absolute
如果父元素的高度是auto，子元素的高度是百分比值，結果就是子元素的高度為0，原因同上，在進一步分析，規范中有提到：如果包含塊的高度沒有顯示的指定（高度由內容決定），並且不是絕對定位元素，則計算值為auto，我們要知道高度和百分比值是沒辦法進行計算的！！！
auto * 100/100 = NaN