html - 将页脚保持在内容下方的问题

Question

我目前在将页脚保持在页面底部和内容下方时遇到了一些问题。我目前将它放在页面底部，只是将其保持在内容下方似乎是个问题。

我的页脚布局是:

#footer
    #footer-content
        p.copyright
        p.credit
    /#footer-content
/#footer

我的样式表:

#footer {
    overflow: hidden;
    clear: both;
    max-width: 940px;
    padding-top: 26px;
    border-top: 1px solid #bbb;
    color: #aaa;
    position: fixed;
    height: 80px;
    width: 50%;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding-bottom: 0;
    text-align: center;
}
#footer-content {
    width: 100%;
}

将 position 设置为 absolute 会使整个页脚消失在页面的某处，所以我不能只更改它。

如何使页脚保持在内容下方？我对任何 JavaScript 解决方案持开放态度。

FIDDLE (因为它是 WordPress，我无法复制所有内容)

编辑:

做了一些修改。仍然没有改变我的问题。

Answer 1

您所描述的是位于内容底部的页脚。在页脚 div 中定义内容是不需要的信息。就我们所关心的而言，您可以在页脚中放置一个钻石独 Angular 兽。真正需要的信息是基本布局，也就是页眉区域、内容区域、侧边栏区域、页脚区域。

这里有一个现场演示，说明它会做什么 http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

这将扩展短内容的内容，将页脚推到底部。对于较长的内容，随着内容变大，页脚位于内容下方。

HTML

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

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

您需要一个占据 View 区域的容器，通过将页脚 div 设置为容器的绝对底部，它将位于底部。内容“正文”将根据需要扩展容器，页脚每次都将位于内容正下方的底部。默认情况下，div 有一个 display:block，因此它们每次都会推送到下一行。