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;
   ...
}

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

Answer 2

尝试使用我在this 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 3

这可能就是你要找的东西 http://ryanfait.com/sticky-footer/

Answer 4

尝试更改

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

到

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

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>

页脚不会粘贴到页面底部

5 个答案: