1、在網頁設計中我們經常遇到寬度自適應，但有時候可能一種高度自適應的問題。這個時候我們的position之absolute就可以幫你了。
2、position之absolute是脫離文檔流。當width、height設置某值后，該元素的值就是該值。那width、height沒有設置的時候呢？
3、該元素的witdh、height會根據父元素（需設置position:relative，沒有則按瀏覽器作為父元素）的width、height和該元素left、bottom、top、right而改變。
公式：
該元素的witdh = 父元素的width-top-bottom；
該元素的height= 父元素的height-left-right；
該元素位置(該元素left，該元素top)；
廢話不多說，上圖！
html：
<body> <div class="container"> <div class="B"> </div> </div> </body>
css：
.container {width: 600px;height: 600px;background: #999999;position: relative;}
.B { background: #D9C666; position: absolute; top: 5
0px ; left: 100px ; bottom: 100px; right: 100px; }
效果：
4、假如有一高度自適應的div，父元素高度300px，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度
html:
<div class="container"> <div class="A"> </div> <div class="B"> </div> </div>
css:
.container {width: 600px;height: 300px;background: #999999;position: relative;}
.A { height: 100px; background: #BBE8F2; }
.B { width:100%;background: #D9C666; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
效果：
就這么簡單的完成！