關於html與body的高度問題

2021-10-01 15:21:04 字數 2010 閱讀 6953

今天看到乙個css樣式：html,body，第一次看到，感覺挺奇怪，為什麼html還需要設定height:100%呢，html不就是整個視窗嗎？我是這樣認為的。然後就把html去掉只剩下body的height:100%，麻煩了，頁面內容消失了(頁面裡只有乙個空div通過百分比設定height)。

html**：
css**：

然後在chrome下審查元素，發現如下圖：

html標籤：

body標籤：

從圖中可以發現，html、body、div三個標籤寬、高一致，寬度全屏顯示，高度都為0px；

我知道乙個事實：乙個div塊級元素沒有主動為其設定寬度和高度，瀏覽器會為其分配可使用的最大寬度(比如全屏寬度)，但是不負責分配高度，塊級元素的高度是由子元素堆砌撐起來的。那麼，html和body標籤的高度也都是由子級元素堆砌撐起來的。

還有，元素高度百分比需要向上遍歷父標籤要找到乙個定值高度才能起作用，如果中途有個height為auto或是沒有設定height屬性，則高度百分比不起作用，此時的情況是父元素高度依賴子元素堆砌撐高，而子元素依賴父元素的定高起作用，互相依賴，卻都無法依賴，死迴圈了。

那如何解決這個問題呢，可以讓子元素先定高，這樣是可以解決；但是如果子元素一定要依賴父元素高度呢？

上面的html**可以看出，div的父元素是body，body的父元素是html，通過height:100%層層向上，找到頂級獲取定高。

所以出現了html和body同時設定height:100%，那html的上級是誰呢？

通過上面的事實知道，瀏覽器負責分配塊級元素寬度，那麼瀏覽器也一定可以分配高度(只是沒有做)，那麼瀏覽器本身是有寬度和高度的，設定html的height:100%，就可以獲取瀏覽器的定高了，後面的body和div也就有了依賴。

css**：

html,body
一般情況下，我們css控制的最高結點就是body，例如設定：body則瀏覽器介面就是完全的#068的背景色。這裡看上去是body標籤下的背景色起作用了，我到不這麼認為，這裡不是body的background起作用，而是body作為乙個根結點起作用了，html標籤未被啟用，body但當類似於根結點的結點，其background背景色被瀏覽器俘獲，瀏覽器介面背景色為background的背景色，以上是我的推論，這種推論不是我憑空想象出來的，而是有一定的根據的。看下面的一段css**：

body
意思很簡明：外邊距100畫素，邊框30畫素，背景色#069，按照對一般標籤的理解，100畫素的外邊距應該不含有背景色的，然而顯示的結果是（firefox下表現與此類似）：

還有一點可以證明我上面的推論，就是一旦設定了html節點的background背景色之後，body的背景色將失效。例如下面的簡短**：

html


body
跟上面的想比，就是新增了html的背景色，結果（截自ie6，firefox瀏覽器下表現一致）：

結果是什麼呢？body標籤的滿屏的背景色不見了，「失效」了。其實，在我看來，不是「失效」，是生效了。

當html標籤無背景樣式時，body的背景色其實不是body標籤的背景色，而是瀏覽器的。

一旦html標籤含有背景色，則body的背景色變成了正常的body標籤自己的背景色，而此時的html標籤最頂級，背景色被瀏覽器獲取，成為瀏覽器的背景色。

Html設定html與body元素高度問題

在一些比較正規的 經常見到會設定html與body的高度。是為了後面的div高度正確的顯示。div的100 是從其上一級div的寬高繼承來的，有一點很關鍵，就是要設定div100 顯示，必須設定其上一級div的寬度或高度，否則無效。只要為html和body設定高度為100 就可以了html,body...

Html設定html與body元素高度問題

在一些比較正規的 經常見到會設定html與body的高度。是為了後面的div高度正確的顯示。div的100 是從其上一級div的寬高繼承來的，有一點很關鍵，就是要設定div100 顯示，必須設定其上一級div的寬度或高度，否則無效。只要為html和body設定高度為100 就可以了html,body...

css 高度自適應的問題 body高度問題

css 高度自適應的問題 物件height 100 並不能直接產生效果，是因為跟其父物件有關。center 上面的css樣式是無效的，不會產生任何效果。需要改寫 html,body center 對 center物件設定了height 100 同時設定了html與body的height 100 這就...