使用 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/

我将两个 div 都更改为 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运行代码...​