将页脚放在页面底部（如果需要，可滚动） [英] Keep footer at the bottom of the page (with scrolling if needed)

问题描述

我正在尝试在页面底部显示页脚。如果页面长于1个屏幕，我希望页脚仅在滚动到底部后才显示。所以我不能使用'position：fixed'，因为它将始终显示。

I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.

我试图复制以下示例： http://peterned.home.xs4all.nl/examples/csslayout1.html

I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html

但是，当我使用以下内容时，由于某些原因，页脚会在我的长页中途显示。

However when I use the following, the footer is showing halfway my long page for some reason.

position: absolute; bottom:0 

我既有短页又有长页，我希望它位于底部

I have both short pages and long pages and I would like it to be at the bottom of both of them.

我如何也将页脚放在长页的底部？

How can I keep the footer at the bottom on a long page as well?

小提琴

我创建了这些小提琴以显示问题并测试代码。
请在您的解决方案中发布一个有效的示例。

I've created these Fiddles to show the problem and test the code. Please post a working example with your solution.

• 短页

长页

我的页脚CSS：

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }

推荐答案

我建议使用粘性页脚方法。请参阅以下链接：

I would suggest the "sticky footer" approach. See the following link:

http://css-tricks.com/snippets/css/sticky-footer/

这篇关于将页脚放在页面底部（如果需要，可滚动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！