當你讓一個元素的高度設定為百分比高度時，是相對於父元素的高度根據百分比來計算高度。當沒有給父元素設置高度（height）時或設置的高度值百分比不生效時，瀏覽器會根據其子元素來確定父元素的高度，所以當無法根據獲取父元素的高度，也就無法計算自己高度。 換句話說，父元素的高度只是一個缺省值：height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果，也就是一個null值，瀏覽器不會對這個值有任何的反應。
html 的父元素可以理解成window，瀏覽器會將html填充填充完一個瀏覽器窗口。 設置html的height為具體的像素值，當其值大於瀏覽器窗口時，瀏覽器出現滾動條，當其值小於瀏覽器窗口時，同樣會將html填充完整個瀏覽器窗口（可以設置背景測試）。設置html的height為百分比時，當其值大於100%出現滾動條，當小於100%時同樣會將html填充完整個瀏覽器窗口（可以設置背景測試）。 但是子html的子元素的高度設置成百分比時，會按照html設置的高度值計算比例。
對於body的設置的高度小於瀏覽器窗口時，同樣會填充滿整個瀏覽器窗口（可以設置背景測試），但是其子元素的高度設置成百分比時，會按照body設置的高度值來計算比例。
<!doctype html> <html style="height:50%; background-color:#9F0"> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body style="height:100%; "> <div style="height:100%; background-color:#FFF" > html的高度設置成小於瀏覽器窗口高度，但是仍然填充滿整個瀏覽器窗口，但是其子元素的高度設置成百分比時，會按照父元素設置的高度值來計算比例。 </div> </body> </html>
<!doctype html> <html style="height:50%; "> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body style="height:100%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > body的高度設置成小於瀏覽器窗口高度，但是仍然填充滿整個瀏覽器窗口，但是其子元素的高度設置成百分比時，會按照父元素設置的高度值來計算比例。 </div> </body> </html>
<!doctype html> <html style="height:150%; "> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body style="height:100%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > html的高度設置成大於瀏覽器窗口高度，會出現滾動條。 </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body style="height:50%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > 由於html沒有設置高度，在body上面設置height:50%，未達到預期效果 </div> </body> </html>
<!doctype html> <html style=" height:100%"> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body style="height:50%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > 由於html沒有設置高度，在body上面設置height:50%，未達到預期效果 </div> </body> </html>
