為什麼我的“height：100%”失效了？？？！！！
阿新 • • 發佈：2019-02-14
我相信很多朋友都遇到過這樣一個問題，就是想把一個div的高度設為100％，以此來自適應不同解析度下的視窗（比如一側的導航條）。
但是問題來了，我們打算做一個左側的導航欄，高度為100％。我直接使用了以下程式碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .aa{ height: 100%; width: 100px; background-color:black; } </style> </head> <div class="aa"></div> <body> </body> </html>
但是，奇怪的事情發生了，開啟頁面什麼東西也沒有。
檢查元素髮現寬度100px；高度為0；
那麼我的height：100%去哪了呢？？？
你需要理解瀏覽器是如何計算高度和寬度的。web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式就完全不一樣了。事實上，瀏覽器不計算內容的高度，除非內容超出了視窗範圍（出現滾動條）。或者你給整個頁面設定一個絕對高度。否則，瀏覽器就會簡單的然後內容往下堆砌，頁面的高度也就不用考慮了。
因為頁面沒有預設的高度值，所以，當設定百分百的高度時，無法根據父元素獲取高度，也就無法設定絕對高度。換句話說，父元素的高度只是一個預設值height：auto。只有子元素撐開父元素。
那麼要解決這個問題其實很簡單，只要給父元素設定一個預設值。程式碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> html,body{ margin: 0; padding: 0; height: 100%; width: 100%; } .aa{ height: 100%; width: 100px; background-color:black; } </style> </head> <div class="aa"></div> <body> </body> </html>
給他的父元素一個高度引數，這樣問題就問沒解決了。自適應的高度百分百就完成了。
