9

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

我要做的是让页脚（这是一个在页面宽度上重复的图像）在没有足够的内容自然地将其推到底部时粘在浏览器的底部页面，当有足够的内容将其推到底部时，它就会这样做。一个示例是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 之类的原因（这可能是为什么所有解决方案都不起作用的原因吗？）。

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

4

3 回答 3

2

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

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

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

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

于 2011-08-24T01:21:13.807 回答
1

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

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

于 2010-02-08T13:01:53.047 回答
0

将 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)
}
于 2011-08-30T08:34:35.000 回答