首先我們要知道height:100%能生效有兩種情況。
-
第一種是父級有顯性高度，即寫了具體值。當然從 html 一直往下都賦予
height:100%也是屬於這種情況。（html=>body=>...=>父級=>目標元素）。當然設定
max-height與min-height對height:100%的多數情況是沒用的，它們只是設定邊界而不是設定具體值。 -
第二種就是自身絕對定位，父級相對定位脫離文件流。其實原理和上述是一致的。
解決辦法：
-
給予顯性高度，當然這一辦法幾乎沒用。能寫死高度就不會出現這個問題了。
-
無奈的子絕父相，給予父級相對定位，自身絕對定位。
注意：子元素絕對定位是計算父元素的 padding 值的。而傳統的height:100%是不計算的。當然使用全域性的box-sizing: border-box就不用擔心了。
還有一個問題。其實要牽扯到height:100%與height: inherit的不同。那就是父級position:static而子級是position: absolute的時候,子元素已經脫離文件流，它的父級就是最近的定位元素。height:100%的物件就不是它真正的父級了。但是height: inherit就不出現這種問題。