html - 如何在不使用绝对定位的情况下将 div 定位到容器底部？

Question

我有一个非常困难的 CSS 问题。我有以下布局(这只是 Paint 中的快速模型):

我需要将红色框 float 到它容器的底部。通常我会使用 position: absolute; bottom: 0; 但这会导致文本与 div 重叠，这是我不想要的。我希望该框表现得像第二张图片(情况相同，但文字更多)

这可能吗？我不介意放弃对非常旧的浏览器的支持。

Answer 1

不要放弃 position: absolute。只需在容器底部添加等于页脚 div 高度的内边距。

#outer{
    position: relative;
    padding-bottom: 55px;
}

#foot{
    position: absolute;
    height: 55px;
    width: 100%;
    bottom: 0;
    left: 0;
}

没有填充:http://jsfiddle.net/cG5EH/2

带填充:http://jsfiddle.net/cG5EH/1