Question

我一直在关注如何将页脚保持在页面底部的本教程，即使没有太多内容： http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

据我所知，我已经提供了本教程指定的所有必要属性，但页脚仍然不会粘在页面底部。

当我使用firebug查看页面时，我可以看到HTML和正文的高度为100％，但尽管使用了＆＃34; min-height：100％;＆＃34;对于#wrapper，它仍然没有填满100％的窗口。

以下是CSS的重要部分，但如果您想查看完整的源代码，请在此处使用：http://ewanroycroft.co.uk/bc/

html {
    padding: 0;
    margin: 0;
    height: 100%;
}
body {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    background-color: #E9E9E9;
}
#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
#headerWrap {
    width: 100%;
    height: 120px;
    min-width: 600px;
    padding-bottom: 1px;
    background: url("images/bg-header.png") repeat-x scroll left bottom #FFFFFF;
}
#content {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    min-width: 600px;
    max-width: 900px;
    margin: 0 auto 0 auto;
    padding: 0px 25px 80px 25px;
}
#footerWrap {
    clear: both;
    width: 100%;
    height: 80px;
    min-width: 600px;
    background-color: #231F20;
    box-shadow: 0px 0px 10px 0px #231F20;
    position: absolute;
    bottom: 0;
}

提前感谢您的帮助！

Answer 1

我访问了您的网站http://ewanroycroft.co.uk/bc/。我不知道你想要什么，但如果你想要它总是固定在页面的底部，你应该看看CSS的'position：fixed'属性。

如果你希望它在底部，但在用户向下滚动时仍然存在，我会建议'min-height：### px'属性。

我访问了您的网页并做了这个修复：

#content{
...
min-height: 600px;
...
}

底部下降。为了更好地使用，您应该使用Javascript获得用户的高度，然后将其设置为#content的min-height（进行精确的数学运算）。

希望它可以提供帮助！

Answer 2

根据您发布的指南，您有两件事情遗失：

将身体高度设置为100％。它目前是自动的。
不要为包装器设置高度。相反，设置min-height。

之后，它应该表现得像你期望的那样。

无法将页脚保留在页面底部

2 个答案: