轉自https://blog.csdn.net/javaloveiphone/article/details/51098972
一、html,body{height:100%}
今天看到一個CSS樣式：html,body{height:100%}，第一次看到，感覺挺奇怪，為什么html還需要設置height:100%呢，html不就是整個窗口嗎？我是這樣認為的。然后就把html去掉只剩下body的height:100%，麻煩了，頁面內容消失了(頁面里只有一個空div通過百分比設置height)。
html代碼：
<body> <div></div> </body>- 1
- 2
- 3
css代碼：
<style type="text/css"> *{ margin:0px; padding:0px; } body{ height:100%; } div{ background:#ddd; height:50%; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
然后在chrome下審查元素，發現如下圖：
html標簽：
body標簽：
div標簽：
從圖中可以發現，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{ height:100%; }- 1
- 2
- 3
二、背景色
一般情況下，我們css控制的最高結點就是body，例如設置：body{background:#069;}則瀏覽器界面就是完全的#068的背景色。這里看上去是body標簽下的背景色起作用了，我到不這么認為，這里不是body的background起作用，而是body作為一個根結點起作用了，html標簽未被激活，body但當類似於根結點的結點，其background背景色被瀏覽器俘獲，瀏覽器界面背景色為background的背景色，以上是我的推論，這種推論不是我憑空想象出來的，而是有一定的根據的。看下面的一段css代碼：
body{background:#069; margin:100px; border:30px solid #093;}- 1
- 2
意思很簡明：外邊距100像素，邊框30像素，背景色#069，按照對一般標簽的理解，100像素的外邊距應該不含有背景色的，然而顯示的結果是（Firefox下表現與此類似）：
還有一點可以證明我上面的推論，就是一旦設置了html節點的background背景色之后，body的背景色將失效。例如下面的簡短代碼：
html{background:#999;} body{background:#069; margin:100px; border:30px solid #093;}- 1
- 2
跟上面的想比，就是添加了html的背景色，結果（截自IE6，Firefox瀏覽器下表現一致）：
結果是什么呢？body標簽的滿屏的背景色不見了，“失效”了。其實，在我看來，不是“失效”，是生效了。
當html標簽無背景樣式時，body的背景色其實不是body標簽的背景色，而是瀏覽器的。
一旦html標簽含有背景色，則body的背景色變成了正常的body標簽自己的背景色，而此時的html標簽最頂級，背景色被瀏覽器獲取，成為瀏覽器的背景色。