按常理，當我們用CSS的height屬性定義一個元素的高度時委煤，這個元素應該按照設(shè)定在瀏覽器的縱向空間里擴展相應的空間距離堂油。例如，如果一個div元素的CSS是height: 100px;素标，那它應該在頁面的豎向空間里占滿100px的高度称诗。
而跟W3C的規(guī)范，百分比的高度在設(shè)定時需要根據(jù)這個元素的父元素容器的高度头遭。
那為什么 height:100%; 不起作用寓免？
首先：
你需要理解瀏覽器是如何計算高度和寬度的。Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度计维。如果你不給寬度設(shè)定任何缺省值袜香，那瀏覽器會自動將頁面內(nèi)容平鋪填滿整個橫向?qū)挾取?/p>
但是高度的計算方式完全不一樣。事實上鲫惶，瀏覽器根本就不計算內(nèi)容的高度蜈首，高度為：auto;會根據(jù)內(nèi)容的高度逐步往下堆疊。
因為頁面的高度值為:auto欠母，所以欢策，當你讓一個元素的高度設(shè)定為百分比高度時，那么0px*100%=0px赏淌。換句話說踩寇，父元素的高度只是一個缺省值：height: auto;。當你要求瀏覽器根據(jù)這樣一個缺省值來計算百分比高度時六水，只能得到undefined的結(jié)果俺孙。也就是一個null值，瀏覽器不會對這個值有任何的反應掷贾。
所以睛榄，如果想讓一個元素的百分比高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設(shè)定一個有效值：
<html>
? ?<head>
.....
<style type="text/css">
html,body{height:100%;}
div{ height:100%;}
</style>
? </head>
?<body>
? ? ?<div></div>
?</body>
</html>
height: 100%;起作用了想帅。
