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/

我刚刚在我的网站上实现了这一点，而且效果很好！

自从你提出问题以来已经有一段时间了，但希望这会有所帮助！

Answer 2

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

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

Answer 3

将所有内容放入包装中的Main中并使用以下代码：

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)
}

使页脚图像粘贴到Web浏览器或页面的底部

3 个答案: