如何创建一个不与其他内容冲突的页脚？

Question

Sample page

在示例页面上，我设置了div#content { padding-bottom:20px; }，如果20px足以将页脚保留在内容div下方，则效果很好。但是，如果页脚改变大小，我还需要更改填充底部的数量。我想要一个更灵活的解决方案。

是否可以在不将内容移到content-div之外的情况下修复此问题？

更新： 找到了描述问题解决方案的this页面，但作者还指出：

  

只有一个限制   您必须将页脚div的高度设置为auto以外的值。选择您喜欢的任何高度，但要确保在CSS中以像素或ems指定值。这不是一个很大的限制，但这种方法必须正常工作。   如果你的页脚中有很多文本，那么通过让你的页脚更深一些，让文本在底部有更多的空间也是一个好主意。这是为了满足默认情况下将浏览器设置为较大文本大小的用户。解决同一问题的另一种方法是以em为单位设置页脚的高度;这将确保页脚随文本一起增大。如果您的页脚中只有图像而没有什么可担心的 - 只需将页脚高度设置为像素值即可离开。

这让我相信，如果没有JavaScript，我可能无法实现的目标。

Answer 1

由于页脚的高度事先未知，因此无法在CSS中设置显式高度（以px或em为单位）。但是，您可以使用javascript获取页脚高度，并将内容padding-bottom设置为它。 jQuery中的一行：

$('#content').css('padding-bottom', $('#footer').outerHeight(true) + 'px');

jsfiddle：http://jsfiddle.net/blineberry/cFSX4/19/

您可能希望将CSS中的padding-bottom设置为对页脚高度的最佳猜测，并让javascript根据需要进行微调。

Answer 2

告诉我，如果我把你弄好了，请检查这个链接，如果不是只是试着解释其他问题是什么。

http://jsfiddle.net/2cJsf/19/

*您可以使用“position：absolute;”但那是你的选择，我不喜欢在网站上有很多有职位的div时使用它的车。

Answer 3

就我个人而言，我将自己的页脚放在内容div之外，这为我提供了更加一致和灵活的方法。

我的代码可能如下所示

<div id="content">My content here</div>
<div id="foot">Copyright &copy; 2011 mywebsite.com. All rights reserved.<br />my random resize content here</div>

然后使用CSS我可能会做这样的事情

body {margin-bottom:10px;}
#content {padding:5px;}
#foot {padding:10px;}

仅作为示例，但显然风格适合您的页面和代码。

我希望这会有所帮助。