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

Question

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

我需要将红色框浮动到它的容器底部.通常我会使用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