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

Question

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

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

当我使用 firebug 查看页面时，我可以看到 HTML 和正文的高度为 100%，但尽管使用了“min-height: 100%;”对于#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 的最小高度(进行精确的计算)。

希望对您有所帮助!