height：100%失效解決辦法

首先咱們要知道height:100%能生效有兩種狀況。

1. 第一種是父級有顯性高度，即寫了具體值。固然從 html 一直往下都賦予height:100%也是屬於這種狀況。（html=>body=>...=>父級=>目標元素）。

   固然設置 max-height 與 min-height 對height:100%的多數狀況是沒用的，它們只是設置邊界而不是設置具體值。

2. 第二種就是自身絕對定位，父級相對定位脫離文檔流。其實原理和上述是一致的。

解決辦法：

1. 給予顯性高度，固然這一辦法幾乎沒用。能寫死高度就不會出現這個問題了。

2. 無奈的子絕父相，給予父級相對定位，自身絕對定位。

注意：子元素絕對定位是計算父元素的 padding 值的。而傳統的height:100%是不計算的。固然使用全局的box-sizing: border-box就不用擔憂了。

還有一個問題。其實要牽扯到height:100%與height: inherit的不一樣。那就是父級position:static而子級是position: absolute的時候,子元素已經脫離文檔流，它的父級就是最近的定位元素。height:100%的對象就不是它真正的父級了。可是height: inherit就不出現這種問題。

參考 張鑫旭:CSS中height:100%和height:inherit的異同