【发布时间】:2013-04-29 06:26:45
【问题描述】:
我发现了很多关于这个主题的文章,但没有一篇文章对我有用,我想在内容不够大时在屏幕底部制作一个页脚,但当内容长于我的页脚停留在内容下方且不会停留在屏幕底部的屏幕。
提前致谢!
【问题讨论】:
我发现了很多关于这个主题的文章,但没有一篇文章对我有用,我想在内容不够大时在屏幕底部制作一个页脚,但当内容长于我的页脚停留在内容下方且不会停留在屏幕底部的屏幕。
提前致谢!
【问题讨论】:
编辑:试试CSS Sticky Footer:很好,而且只有 CSS。
如果你想尝试,absolute CSS 位置属性也可以工作。结帐MDN docs:
#footer {
position: absolute;
bottom: 0;
}
【讨论】:
实际上,仅使用 CSS 就很容易做到这一点,尽管有一些小限制。这是一个如何完成的演示(查看源代码以获取代码):
http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm
以下是它的工作原理的详细说明,以备不时之需:
【讨论】:
这只是另一个示例,在所有浏览器 AFAIK 中都能正常工作。 http://peterned.home.xs4all.nl/examples/csslayout1.html
编辑:我不是作者,只是前段时间自己找过类似的东西。
【讨论】:
-- 用 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>
【讨论】: