如何讓 height 100 起作用

按常理，當我們用css的height屬性定義乙個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間裡擴充套件相應的空間距離。例如，如果乙個div元素的css是height: 100px;，那它應該在頁面的豎向空間裡佔滿100px的高度。

而跟w3c的規範，百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以，如果你把乙個div的高度設定為height: 50%;，而它的父元素的高度是100px，那麼，這個div的高度應該是50px。

當設計乙個頁面時，你在裡面放置了乙個div元素，你希望它佔滿整個視窗高度，最自然的做法，你會給這個div新增height: 100%;的css屬性。然而，如果你要是設定寬度為width: 100%;，那這個元素的寬度會立刻擴充套件到視窗的整個橫向寬度。高度也會這樣嗎？

錯。

為了理解為什麼不會，你需要理解瀏覽器是如何計算高度和寬度的。web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。

但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設定乙個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。

因為頁面並沒有預設的高度值，所以，當你讓乙個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是乙個預設值：height: auto;。當你要求瀏覽器根據這樣乙個預設值來計算百分比高度時，只能得到undefined的結果。也就是乙個null值，瀏覽器不會對這個值有任何的反應。

**演示

上面的演示例子是父元素沒有設定固定高度，於是子元素的高度height: 100%也不會起作用。你可以根據父元素的背景色來判斷子元素的高度不是100%。

那麼，如果想讓乙個元素的百分比高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設定乙個有效值。換句話說，你需要這樣做：

>
>
style
="height
: 100%;
">
>
想讓這個div高度為 100% 。
p>
div>
body
>
html
>

現在你給了這個div的高度為100%，它有兩個父元素和。為了讓你的div的百分比高度能起作用，你必須設定和的高度。

style
="height
: 100%;
">
style
="height
: 100%;
">
style
="height
: 100%;
">
>
這樣這個div的高度就會100%了
p>
div>
body
>
html
>

如何讓 height 100 起作用

如何讓 height 100 起作用

如何讓 height 100 起作用

如何讓 height 100 起作用

相關推薦