使页脚图像贴在 Web 浏览器或页面的底部答案

【问题标题】：Making footer image stick to bottom of web browser or page使页脚图像贴在 Web 浏览器或页面的底部
【发布时间】：2011-01-14 08:45:26
【问题描述】：

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

当没有足够的内容自然地将其推送到页面底部，当有足够的内容将其推到底部时，它就会这样做。一个例子是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 之类的原因（这可能是所有解决方案都不起作用的原因吗？）。

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

【问题讨论】：

标签： css sticky-footer

【解决方案1】：

这是帮助我实现这种布局的来源：

http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx

【讨论】：

您是如何编辑代码以使其固定在页面底部的？当我输入该代码时，会拿走我的图像并将页脚及其边框的颜色放置在页脚和页眉中时，页脚和页眉只会粘在浏览器窗口的顶部和底部。我想做的是当页面上有很多内容时，页脚被推到看不见的地方，直到没有更多内容为止。
啊，我知道您想要什么，以及这与上面的示例有何不同。我想要在屏幕上固定页眉和页脚，所以不需要根据需要调整代码。

【解决方案2】：

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

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

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

您的问题已经有一段时间了，但希望这会有所帮助！

【讨论】：

【解决方案3】：

将 Main 中的所有内容放在 Wrapper 中并使用以下代码：

html, body, form
{
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;   (-80px will be different for you, usually the same as the footer but negative but mine is different)
}

#footer, .push
{
    height: 60px;   (This is just the height of MY footer, change this to whatever size your footer is)
}

【讨论】：