CSS 之 <html> 與 <body> 的寬高

1月 16 2022 CSS

以前常搞混的觀念。

簡述

如果對 <html> 跟 <body> 的寬高設定「相對單位」時，要特別注意它們的參考對象是誰：

只要搞清楚參考對象，就不會搞混一些東西。

不知道你們會不會跟我一樣，以前經常看不懂這段原始碼的意思：

html,
body {
  height: 100%;
}

這段原始碼通常是用來讓我們做出一個跟視窗一樣高的全屏畫面，但一直以來讓我想不通的問題是：為什麼不直接設定 body: 100% 就好，還要加個 html ？

不過在理解相對單位的參考對象後，我就能解釋那段原始碼的意思了：

// html 設定高度 100%，代表與視窗的高度 x 100%。
html {
  height: 100%;
}
// body 設定高度 100%，代表 html 的高度 x 100%。
body {
  height: 100%;
}

所以如果我們只有寫 body: 100%，就會變成這樣：

// body 設定高度 100%，代表與html的高度 x 100%。
// 思考看看，此時 html 的高度是？
body {
  height: 100%;
}

在 html 沒有做任何高度的設定的情況下，它的高度會是 0，所以 body 的實際高度是 0 x 100% = 0，這也就是為什麼一定要再加上一個 html 的原因。

很多時候我們會搞不清楚 body 與 html 之間的關係，這是因為我們往往沒有搞清楚它們的父元素是指向誰。但是當你搞清楚後，就不會常常搞混了。

記住這個原則：

html 的父元素 → 視窗，body 的父元素 → html。

所以爾後你想做的設定會牽涉到父元素時，請務必先搞清楚父元素到底指向的是誰。