我們都知道需要給html和body標簽設置了高度height:100%之后，再給內部的div設置height:100%的時候，內部div的高度100%才會起到作用。這是由於：%是一個相對父元素計算得來的高度，要想使他有效，我們需要設置父元素的height。解決如下：
1 html,body{ 2 height: 100%; 3 margin: 0; 4 padding: 0; 5 }
熊貓辦公https://www.wode007.com/sites/73654.html
那么瀏覽器是如何計算高度和寬度的？
Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。即我們不設置寬，會自動填滿整個橫向寬度 。
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗范圍(導致滾動條出現)。或者你給整個頁面設置一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面並沒有缺省的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。
即父元素的高度只是一個缺省值：height: auto;我們設置height：100%時，是要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。