當(dāng)你設(shè)置一個元素的高度為100%時，期望這樣元素能撐滿整個瀏覽器窗口的高度，但大對數(shù)情況下，這樣做法沒有任何效果，你知道為什么height:100%不起作用嗎？
按常理，當(dāng)我們用CSS的height屬性定義一個元素的高度時，這個元素應(yīng)該按照設(shè)定在瀏覽器的縱向空間里擴(kuò)展相應(yīng)的空間距離。例如，如果一個div元素的CSS是height: 100px;，那它應(yīng)該在頁面的豎向空間里占滿100px的高度。
而跟W3C的規(guī)范，百分比的高度在設(shè)定時需要根據(jù)這個元素的父元素容器的高度。所以，如果你把一個div的高度設(shè)定為height: 50%;，而它的父元素的高度是100px，那么，這個div的高度應(yīng)該是50px。
那么為什么height:100%不起作用？
當(dāng)設(shè)計(jì)一個頁面時，你在里面放置了一個div元素，你希望它占滿整個窗口高度，最自然的做法，你會給這個div添加height: 100%;的css屬性。然而，如果你要是設(shè)置寬度為width: 100%;，那這個元素的寬度會立刻擴(kuò)展到窗口的整個橫向?qū)挾取８叨纫矔@樣嗎？ ----不會
你需要理解瀏覽器是如何計(jì)算高度和寬度的。Web瀏覽器在計(jì)算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設(shè)定任何缺省值，那瀏覽器會自動將頁面內(nèi)容平鋪填滿整個橫向?qū)挾取?/strong>
但是高度的計(jì)算方式完全不一樣。事實(shí)上，瀏覽器根本就不計(jì)算內(nèi)容的高度，除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動條出現(xiàn))?；蛘吣憬o整個頁面設(shè)置一個絕對高度。否則，瀏覽器就會簡單的讓內(nèi)容往下堆砌，頁面的高度根本就無需考慮。
因?yàn)轫撁娌]有缺省的高度值，所以，當(dāng)你讓一個元素的高度設(shè)定為百分比高度時，無法根據(jù)獲取父元素的高度，也就無法計(jì)算自己的高度。換句話說，父元素的高度只是一個缺省值：height: auto;。當(dāng)你要求瀏覽器根據(jù)這樣一個缺省值來計(jì)算百分比高度時，只能得到undefined的結(jié)果。也就是一個null值，瀏覽器不會對這個值有任何的反應(yīng)。
如果想讓一個元素的百分比高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設(shè)定一個有效值。換句話說，你需要這樣做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height:100%;
}
.container{
height:100%;
background-color: #669900;
}
.bar{
height:50%;
background-color: #eb7350;
}
</style>
</head>
<body>
<div class="container">
<div class="bar"></div>
</div>
</body>
</html>
現(xiàn)在你給了這個div的高度為100%,它有兩個父元素<body>和<html>。為了讓你的div的百分比高度能起作用，你必須設(shè)定<body>和<html>的高度。
上面的例子會出現(xiàn)滾動條，那是因?yàn)椋琤ody有默認(rèn)的margin 和padding值，設(shè)置一下就不會有滾動條了：
body{
margin:0;
padding:0;
}在使用height: 100%;時需要注意的一些事項(xiàng)
1、Margins 和 padding 會讓你的頁面出現(xiàn)滾動條，也許這是你不希望的。
2、如果你的元素實(shí)際高度大于你設(shè)定的百分比高度，那元素的高度會自動擴(kuò)展。
