html - 屏幕底部的页脚

Question

我发现了很多关于这个主题的文章，但没有一个对我有用，我想在内容不够大时在屏幕底部制作一个页脚，但是当内容长于屏幕时我的页脚位于内容下方，不会停留在屏幕底部。

提前致谢！

Answer 1

这只是另一个示例，如何在所有浏览器 AFAIK 中正常工作。 http://peterned.home.xs4all.nl/examples/csslayout1.html

编辑：我不是作者，只是前段时间自己找过类似的东西。

Answer 2

编辑：试试CSS Sticky Footer：它很好，而且只有 CSS。

如果您想进行实验，absoluteCSS 位置属性也可以工作。查看MDN 文档：

#footer {
    position: absolute;
    bottom: 0;
}

Answer 3

实际上，仅使用 CSS 就很容易做到这一点，尽管有一些小的限制。这是一个如何完成的演示（查看源代码以获取代码）：

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

以下是其工作原理的详细说明，以备不时之需：

http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting!&p=1239966#post1239966

Answer 4

-- 用javascript做

- 例子

<div class='content'>
  your page
</div>
<div class='Footer'>Footer</div>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 var document_height = $(document).height();
 var content_height = $('.content').height();

 if (content_height < document_height) {
    $('.content').css('height', (document_height));
 }
</script>