使用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运行代码。 ..