javascript - 使用 css 对齐和填充

Question

我想要一个包含两个其他 div 的 div，一个顶部 div 和一个底部 div。顶部 div 应该与顶部对齐并具有自动高度，这取决于顶部 div 的内容。底部 div 应填充父 div 的空白区域。

我只想使用 CSS 进行对齐。我不想自己计算任何位置或大小。

我尝试了以下方法:

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

问题:如果调整父级的大小，bottom-div 应该向下移动一些像素。

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

问题:如果调整父级的大小，bottom-div 应该变小。

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

Answer 1

好吧，这个怎么样:http://jsfiddle.net/2dUxa/3/

我将两个 div 都更改为 position: relative，并给底部一个 height: 100%。

然后，设置#main overflow: hidden;