html - 页脚不粘在页面底部

Question

我有这个 CSS

#footer {
    width:100%;
    padding:14px 0; 
    color:#eef1f6;
    border-top:4px solid #F36F25;
    bottom:0;
}
#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
}
#footer span {
    color:#000000;
}

和 HTML：

<div id="footer">
    <div id="footer-inner">
        <span>&copy; <?php echo date("Y"); ?> Integra Digital</span><br><br>
        <span>Dragon Enterprise Centre, 28 Stephenson Road, Leigh-on-Sea, Essex, SS9 5LY</span><br>
        <span>sales@integradigital.co.uk | tel: 01702 66 77 27 or Freephone: 08000 66 22 01</span>
    </div>
</div>

我需要页脚留在页面底部 - 滚动时不要粘住，所以它固定在底部，所以它不在内容的正下方。

例如，

CONTENT

GOES 

HERE

FOOTER

不是那个，我需要这个：

CONTENT

GOES

HERE





FOOTER

希望我说得通？

谢谢

Answer 1

尝试改变

#footer {
   position:absolute;
   bottom:0;
   ...
}

至

#footer {
   position:fixed;
   bottom:0;
   ...
}

Answer 2

#footer {
   position:absolute;
   bottom:0;
   ...
}

http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

尝试使用我在这个 gist中创建的这个方法。即使没有足够的内容将页脚推到底部，它也会将页脚推到页面底部。

body, html { /*body and html have to be 100% to push header down */
    height:100%;
    width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id.  Position relative IMPORTANT */
    position: relative;
    height: auto;
    min-height: 100%;
}
#header {
    height: 100px;
    background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
    padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
    height: 100px;
    width: 100%;
    background: rgba(255,255,255,0.2);
    position: absolute;
    bottom: 0;
}

编辑

要在页脚上方添加空格，请使用以下代码：

#YourFooterID {
  ....
  margin-top: 5%; //or whatever value you would prefer
  ....
}

编辑 2

这是一个工作 jsfiddle http://jsfiddle.net/CwKGD/

Answer 4

这可能是您正在寻找的 http://ryanfait.com/sticky-footer/

Answer 5

这是更新的小提琴：

#footer {
  width: 100%;
  padding: 14px 0;
  color: #eef1f6;
  border-top: 4px solid #F36F25;
  bottom: 0;
  position: fixed;
}

#footer-inner {
  width: 80%;
  margin: 0 auto 0 auto;
}

#footer span {
  color: #000000;
}

<div id="footer">
  <div id="footer-inner">
    <span>&copy; <?php echo date("Y"); ?> Integra Digital</span><br><br>
    <span>Dragon Enterprise Centre, 28 Stephenson Road, Leigh-on-Sea, Essex, SS9 5LY</span><br>
    <span>sales@integradigital.co.uk | tel: 01702 66 77 27 or Freephone: 08000 66 22 01</span>
  </div>
</div>