爲什麼height:100%不起作用呢？
根據W3C的規範，百分比的高度在設定時需要根據這個元素的父元素容器的高度
通常，設置寬度爲width: 100%;，那這個元素的寬度會立刻擴展到窗口的整個橫向寬度。爲什麼高度不會這樣呢？
爲了理解爲什麼不會，需要理解瀏覽器是如何計算高度和寬度的。
瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度，如果你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式完全不一樣
瀏覽器計算高度的方式：
1.瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。
2.父元素的高度只是一個缺省值(指在無決策者干預情況下，對於決策或應用軟件、計算機程序的系統參數的自動選擇。默認選項的設計可以在用戶不須決策的狀況下就可以基礎地使用上述的軟件與程序。)： height: auto; 當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined(未闡明的，未限定的)的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
所以：父元素沒有設定固定高度，於是子元素的高度height: 100% 也不會起作用。
——————————————————————————————————————————————————
結語：若文章有錯誤的地方，煩請在評論區指出。當然，我會不定時的重新編輯寫過的文章，查錯及優化，希望能將最好的文章展現給讀者。