位于底部的div

Question

我正在尝试将div定位为父div中的页脚。

<div>
...some content...
<div id='footer'>
<span style='float:left'>Left text</span>
<span style='float:right'>Right text</span>
</div>
</div>

现在左右元素都可以，但是页脚div不会与包含div的底部对齐，而是与其内容的底部对齐。

但是如果我尝试将position：absolute设置为页脚，则会失去对父级div宽度的掌握，因此左右跨越一个接一个。

Answer 1

http://jsfiddle.net/ch4Hw/

在容器上使用position:relative;，在页脚上使用position:absolute; bottom:0; height:auto;。

Answer 2

您正在寻找的是（我认为）粘性页脚。请看这里有一个好的技巧：http://ryanfait.com/sticky-footer/

Answer 3

如果你还在寻找，我在这里实现了我的想法：

http://www.facebookanswers.co.uk/code/fullheight/demo2.htm

它是一个自包含文件，IE所有的CSS都带有标记，所以你应该能够看到发生了什么。

完整的文章在这里：

http://facebookanswers.co.uk/?p=312

它给你的是一个标题，两列和一个页脚。

一列用于导航，另一列用于主要内容。页脚位于主列的底部。如果内容小于全屏，则页脚将保留在屏幕底部。但是，一旦获得的内容多于屏幕，它将与其余数据一起滚动。