如何讓 height:100% 起作用
當你設置一個頁面元素的高度(height)爲100%時,期望這樣元素能撐滿整個瀏覽器窗口的高度,但大多數情況下,這樣的做法沒有任何效果。你知道爲什麼height:100%
不起作用嗎?
按常理,當我們用CSS的height屬性定義一個元素的高度時,這個元素應該按照設定在瀏覽器的縱向空間裏擴展相應的空間距離。例如,如果一個div
元素的CSS是height: 100px;
,那它應該在頁面的豎向空間裏佔滿100px的高度。
而跟W3C的規範,百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以,如果你把一個div
的高度設定爲height: 50%;
,而它的父元素的高度是100px,那麼,這個div的高度應該是50px。
那爲什麼 height:100%; 不起作用
當設計一個頁面時,你在裏面放置了一個div
元素,你希望它佔滿整個窗口高度,最自然的做法,你會給這個div
添加height: 100%;
的css屬性。然而,如果你要是設置寬度爲width: 100%;
,那這個元素的寬度會立刻擴展到窗口的整個橫向寬度。高度也會這樣嗎?
錯。
爲了理解爲什麼不會,你需要理解瀏覽器是如何計算高度和寬度的。Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值,那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式完全不一樣。事實上,瀏覽器根本就不計算內容的高度,除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設置一個絕對高度。否則,瀏覽器就會簡單的讓內容往下堆砌,頁面的高度根本就無需考慮。
因爲頁面並沒有缺省的高度值,所以,當你讓一個元素的高度設定爲百分比高度時,無法根據獲取父元素的高度,也就無法計算自己的高度。換句話說,父元素的高度只是一個缺省值:height: auto;
。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時,只能得到undefined
的結果。也就是一個null值,瀏覽器不會對這個值有任何的反應。
那麼,如果想讓一個元素的百分比高度height: 100%;
起作用,你需要給這個元素的所有父元素的高度設定一個有效值。換句話說,你需要這樣做:
<html>
<body>
<div style="height: 100%;">
<p>
想讓這個div高度爲 100% 。
</p>
</div>
</body>
</html>
現在你給了這個div
的高度爲100%,它有兩個父元素<body>
和<html>
。爲了讓你的div的百分比高度能起作用,你必須設定<body>
和<html>
的高度。
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
這樣這個div的高度就會100%了
</p>
</div>
</body>
</html>
在使用height: 100%;
時需要注意的一些事項
1、Margins 和 padding 會讓你的頁面出現滾動條,也許這是你不希望的。
2、如果你的元素實際高度大於你設定的百分比高度,那元素的高度會自動擴展。