CSS 粘滞页脚失败答案

【问题标题】：CSS Sticky Footer FailureCSS 粘滞页脚失败
【发布时间】：2013-05-02 15:41:05
【问题描述】：

我正在尝试让 Sticky Footer 工作，目前已尝试以下 css：

 #footer {
        width:920px;
        height:208px;
        font-size:10px;
        margin-left:auto;
        margin-right:auto;
        background-image:url(images/grad.png);
        background-repeat:repeat-y;
        padding:0 20px;
        clear:both;
        position:relative;
        margin-top:-208px;
 }

 body {
        margin:0;
        font-family:Arial, Helvetica, sans-serif;
        font-size:13px;
        color:#333333;
        background-repeat:repeat-x;
        padding: 0;
        height: 100%;
 }

 #wrap {
        width:960px;
        margin:0 auto;
        min-height:100%;
        height: 100%;
 }


    #content {
        width:892px;
        float:left;
        border-left:4px solid white;
        border-right:4px solid white;
        padding:15px 0px 15px 20px;
        background-image:url(images/sidebar_bg.png);
        position:relative;
        padding-bottom:143px;
    }

我不得不减少#content padding-bottom，所以它会适合。但我仍然有问题。首先，较长页面的底部空间过多（请参阅 - http://bellbird.redgraphic.co.uk/headteacher/ ）其次，在较短的页面上，当浏览器窗口调整大小时，页脚不会向上滚动（请参阅 - http://bellbird.redgraphic.co.uk/school-council/ ）

粘页脚似乎总是一个问题，所以我一定错过了一个技巧。

任何帮助将不胜感激。

刘易斯

【问题讨论】：

使用位置：固定和底部：0；为您的 CSS

标签： css sticky-footer

【解决方案1】：

usefull link here. 这个帮助我解决了同样的问题。

CSS 标记：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

HTML 标记：

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

【讨论】：

我认为position:absolute 不总是将页脚放在底部！当你resize window时会出现很多问题。
@Sarfaraz ...你有一个例子吗？
我已经尝试了很多次，当我让网站和滚动条可见时，当你 resized window 页脚总是根据给定位置向上并且我很确定它时它就不起作用了
现在用这个好了。通过调整窗口大小尝试了我的一些网站。仍然在底部...它不仅是使用此方法计算的页脚位置，还包括它的元素...
Make sure you update your answer with some actual code.

【解决方案2】：

使用这个 css 而不是你的

#footer {
   position:fixed;
   bottom:0;
   left:0;
   right:0;
   height:40px;   /* Height of the footer */
   background:#6cf;
}

【讨论】：

【解决方案3】：

html:

<div class="wrap">
  <div class="inner-wrap">
  ...
  </div>
</div>
<footer>
...
</footer>

css:

html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}

【讨论】：