一、div設置百分百高度實現描述
在html布局中body內第一個div盒子對象設置100%高度height樣式，是無法成功顯示100%高度的。這個是因為body高度默認值為自適應的，所以及時設置body第一個布局div高度為百分比也是無效的，因為div解析上級高度為0，自然div height 100%實際高度也為0。
瀏覽器根本就不計算內容的高度，除非內容超出了視窗范圍(導致滾動條出現)。或者你給整個頁面設置一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面並沒有缺省的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是一個缺省值：height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
如果想讓一個元素的百分比css高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設定一個有效值。
二、未實現div height 100%示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>未成功設置100%高度</title> 6 </head> 7 <body> 8 <div style="height: 100%;background-color: #4d85d1"> 9 所在div設置高度100% 10 </div> 11 </body> 12 </html>
div有兩個父元素html和body，如果想讓div的百分比高度起作用的話就要為html和body設置高度
三、實現div高度100%的示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>成功設置100%高度</title> 6 <style type="text/css"> 7 html,body{ 8 height: 100%; 9 } 10 </style> 11 </head> 12 <body> 13 <div style="height: 100%;background-color: #4d85d1"> 14 所在div設置高度100% 15 </div> 16 </body> 17 </html>
以上雖然實現了div的高度為100%，但是右側出現了滾動條，這是因為body有一定的margin,也就是body默認有margin-top和margin-bottom所以設置100%高度之后body多余的margin值顯示不完整，出現下拉滾動條，要想正確顯示的話就要對body設置margin為0.
四、這是高度100%生效，去掉滾動條
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>成功設置100%高度去除滾動條</title> <style type="text/css"> html,body{ height: 100%; } body{ margin: 0; } </style> </head> <body> <div style="height: 100%;background-color: #4d85d1"> 所在div設置高度100% </div> </body> </html>
五、總結
要實現最外層div高度為100%（百分之百），關鍵對html和body要設置高度100%,如果只設置html和body標簽其中一個高100%，也是無法實現body內第一個盒子高度100%的。但猶豫body默認有一定margin值，但設置body高度height 100%后，瀏覽器就會出現滾動條，所以可以對body設置margin為零，去除間距實現div height 100%也無滾動條效果。