這幾天在學習HTML的知識，今天想做一個極為簡單的頁面，就是分為頭部，內容和底部，本來用三個div即可，可是給div高度設置百分比時發現不生效，具體頁面如下，非常簡單。
下面是html部分：
<body>
<div id="header">
11111111
</div>
<div id="content">
2222222222
</div>
<div id="footer">
33333333
</div>
</body>
就三個div,div是塊級元素，寬度會默認撐開，如果不設置高度時，默認內容會撐開高度
現在給div設置一下高度，如下
<style>
*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 150px;
background-color: blue;
}
#footer{
width: 100%;
height: 100px;
background-color: purple;
}
</style>
其中給div1和div3的高度設置了具體的值，這樣的話，高度會撐開，但是如果將高度值設置為百分比，情況就不一樣了，代碼如下：
<style>
*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 15%;
background-color: blue;
}
#footer{
width: 100%;
height: 10%;
background-color: purple;
}
</style>
將高度設置為百分比后，
高度撐不開了，只會隨着內容的高度撐開，這是為什么呢？后來查了一下資料，
http://www.cnblogs.com/cainiao-Shun666/p/6622678.html
HTML 中塊級元素設置 height:100% 的實現
文中指出：
當你設置一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器窗口的高度，但大多數情況下，這樣的做法沒有任何效果。
為什么height:100%不起作用呢？
按照常理，當我們用CSS的height屬性定義一個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間里擴展相應的空間距離。例如，如果一個div元素的CSS是height: 100px;，那它應該在頁面的豎向空間里占滿100px的高度。
而跟W3C的規范，百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以，如果你把一個div的高度設定為height: 50%;，而它的父元素的高度是100px，那么，這個div的高度應該是50px。
當設計一個頁面時，你在里面放置了一個div元素，你希望它占滿整個窗口高度，最自然的做法，你會給這個div添加height: 100%;的css屬性。然而，如果你要是設置寬度為width: 100%;，那這個元素的寬度會立刻擴展到窗口的整個橫向寬度。高度也會這樣嗎？
錯
為了理解為什么不會，你要理解瀏覽器是如何計算高度和寬度的。Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的據計算方式完全不一樣。事實上瀏覽器根本就不計算內容的高度，除非內容超出了視窗范圍（導致滾動條出現）。或者你給整個頁面設置一個絕對高度，否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度就無需考慮。因為頁面並沒有缺省的高度值，所以當你讓一個元素的高度設定為百分比，無法獲取到父級的高度，自然也無法計算自己的高度。換句話說父元素的高度只是一個缺省值：height:auto.當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
父元素沒有設定固定高度，於是子元素的高度height: 100% 也不會起作用。
那么，如果想讓一個元素的百分比高度：height::100% 起作用，你需要給這個元素的所有父級元素的高度都設定一個值。
換句話說在剛剛的例子中，需要給body和html元素的高度都設置為height:100% 下面的div的高度的百分比才會生效
即：
<style>
*{
margin: 0;
padding: 0;
}
body, html{
width: 100%;
height: 100%;
}
#header{
width: 100%;
height: 15%;
background-color: blue;
}
#footer{
width: 100%;
height: 10%;
background-color: purple;
}
</style>
這樣的話，div1和div3的百分比高度就會生效
之后感謝這篇文章的作者：
http://www.cnblogs.com/cainiao-Shun666/p/6622678.html