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

时间:2014-08-04 23:36:39

标签: html css footer

我一直在关注如何将页脚保持在页面底部的本教程,即使没有太多内容: 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;
}

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

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

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

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

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

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

希望它可以提供帮助!

答案 1 :(得分:1)

根据您发布的指南,您有两件事情遗失:

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

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