來源：https://www.cnblogs.com/QianBoy/p/8571682.html
今天看到一個CSS樣式：html,body{height:100%}，第一次看到，感覺挺奇怪，為什么html還需要設置height:100%呢，html不就是整個窗口嗎？我是這樣認為的。然后就把html去掉只剩下body的height:100%，麻煩了，頁面內容消失了(頁面里只有一個空div通過百分比設置height)。
<body> <div></div> </body>
<style type="text/css"> *{ margin:0px; padding:0px; } body{ height:100%; } div{ background:#ddd; height:50%; } </style>
然后在chrome下審查元素，發現如下圖：
從圖中可以發現，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也就有了依賴。
html,body{ height:100%; }