Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗范圍(導致滾動條出現)。或者你給整個頁面設置一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。因為頁面並沒有缺省的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是一個缺省值：height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
父元素沒有設定固定高度，於是子元素的高度height: 100% 也不會起作用。
例如：
<style> .container{ width: 100%; height: 100%; background: gold; } </style> <body> <div class="container"></div> </body>
如果想讓一個元素的百分比高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設定一個有效值。
現在現在你給了這個div的高度為100%，它有兩個父元素<body>和<html>。為了讓你的div的百分比高度能起作用，你必須設定<body>和<html>的高度 ！！！
<style> body,html{ width: 100%; height: 100%; } .container{ width: 100%; height: 100%; background: gold; } </style> <body> <div class="container"></div> </body>