css - 使页脚图像贴在网络浏览器或页面的底部

Question

我知道这在过去被问过很多次，但对于我来说，我似乎无法让任何其他解决方案发挥作用。

我想做的是在没有足够的内容自然地将页脚推送到页面底部，当有足够的内容将其推到底部时，它就会这样做。一个例子是 http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm。这正是我想要的，但我也无法开始工作。

我目前实现的代码使页脚固定在页面的特定部分，文本位于其下方。您可以在 sourcectrl.co.uk 上看到它，但没什么可看的。这是您观看乐趣的代码。

html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}

header {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px;
    background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}

section {
    width: 940px;
    margin: 0 auto;
    font-size: 1.4em;
    overflow: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: 87px;
    position: relative;
    padding-bottom: 90px;
}

footer {
    display:block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 87px;
    background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}

抱歉，如果看起来很乱!我只是想知道我是否正朝着正确的方向前进，或者我只是没有得到什么？哦，是的，我正在尝试使用 html 5 标记来完成所有这些操作，这就是为什么没有 #footer 之类的东西(这可能是所有解决方案都不起作用的原因吗？)。

如果有人能给我任何帮助或指导，我将不胜感激。

Answer 1

我相信您正在寻找的代码在这里:

http://www.themaninblue.com/writing/perspective/2005/08/29/

我刚刚在我的网站上实现了这个，效果很好!

您问问题已经有一段时间了，但希望这对您有所帮助!