使用css進行對齊和填充

Question

我想要一個包含兩個其他div，頂部div和底部div的div。頂部div應該與頂部對齊並具有自動高度，這取決於頂部div的內容。底部div應填寫父div的空白區域。

我想僅使用CSS進行對齊。我不想自己計算任何位置或大小。

我嘗試以下：

1）http://jsfiddle.net/2dUxa/

問題：如果父調整大小底DIV應該向下移動一些像素。

2）http://jsfiddle.net/Th4Mn/

問題：如果父調整大小底DIV應當變得更小。

使用javascript的解決方案可能如下所示：http://jsfiddle.net/2dUxa/7/ 是不是使用javascript的解決方案？

Answer 1

嗯，這個怎麼樣：http://jsfiddle.net/2dUxa/3/

我都格變爲position: relative，給底部的height: 100%。

然後，設置#main overflow: hidden;

Answer 2

使用此下方標記和CSS ..

這是你的代碼check this以下是我的代碼

​<div id="main"> 

    <header> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p> 
    </header> 

    <footer> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p> 
    </footer> 

</div> 

​#main{ 
width:80%; 
height:300px; 
position:relative; 
background:#ddd;  
} 
header{ 
width:100%; 
height:auto; 
position:absolute; 
top:0; 
left:0; 
background:#aaa;  
} 
​footer{ 
width:100%; 
height:auto; 
position:absolute;  
bottom:0; 
left:0; 
background:#777;  
} 

檢查here運行代碼。 ..