對於CSS的height:100%，顧名思義，該元素的高度自動填充為其父元素的高度。但該樣式有時候會不起作用，Mark down 一下。><
首先，看一下以下CSS代碼：
1 div {
2 height: 100%;
3 }
HTML代碼：
1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <p>我的名字叫做甲基苯醌</p> 6 <div></div> 7 </body> 8 </html>
毫無疑問，div的height: 100%完全不起作用（虧得我當時天真地以為div的高度會和p的高度一樣，因為body的高度被p撐開了，然後100%就起作用了，呵呵，too young too simple），然後現在回想起來，height:100%不起作用，完全是符合邏輯的。因為body元素在沒用設定height的情況下，高度是自適應的，如果div的height:100%起作用的話，那麼body的高度必定會被撐開，這時候body的高度 === div的高度 * 2，而div的樣式是height:100%，完全不符合我國的科學發展觀！！！
要解決這個問題也很簡單，添加如下CSS代碼：
1 htm, body {
2 height: 100%;
3 }
以此類推，在元素不是絕對，固定的情況下，要想height:100%起作用，那麼該元素的父元素的height一定要設置。
那麼，現在的問題來了，為什麼父元素設置了height，其子元素的height: 100%就會起作用呢？
很明顯，父元素設置了高度後，其高度為一個固定值，就算某個子元素設置了height:100%，其高度也不會增加，而且，浏覽器對於元素的overflow的默認值是visible，所以就起作用了。
接著，當子元素設置為絕對定位，即使父元素沒有設定高度，該子元素的height:100%也會起作用，因為絕對定位的子元素不會撐開父元素的高度和寬度，符合科學發展觀！！！！
做過響應式布局的都知道，我想某個div的高度隨屏幕的大小而變化，但我又想讓這個div有著一些margin或padding的效果，div絕對定位後，設置height:100%，在設置margin或padding就會有一些亂七八糟的問題。解決方案可用以下代碼實現。。。。
1 div {
2 position: absolute;
3 height: auto;
4 left: 0;
5 top: 0;
6 right: 0;
7 bottom: 0;
8 margin: 20px;
9 }