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

我目前有一些问题，保持我的页脚在页面底部和下面的内容。我现在把它放在页面底部，只是把它放在内容下面似乎是个问题

我的页脚布局是：

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

将“位置”设置为“绝对”会使整个页脚消失在页面的某个位置，所以我不能更改它

我该怎么做才能使页脚位于内容下方？我对任何JavaScript解决方案都持开放态度

（因为是WordPress，我无法复制所有内容）

编辑：

---

做了一些编辑。仍然不能改变我的问题。

我在我创建的任何网站上使用此代码，它对我有效-

#footer{
    display: block;
    text-align: center;
    font-size: 0.75em;
    bottom:0;
    width: 100%;
    height: 30px;
    position: fixed;
}

---

您所描述的是位于内容底部的页脚。在页脚div中定义内容是不需要的信息。你可以在鞋底放一只钻石独角兽。真正需要的信息是基本布局，即页眉区域、内容区域、边栏区域和页脚区域

这是一个现场演示，演示了这将做什么

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

HTML

---

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

我相信是你所有的

位置：fixed

导致了这个问题，所以我试着在这里帮你清理一下

位置：固定；设置相对于浏览器窗口而不是页面的divs位置。

我已编辑了您的应用程序

为此，您的文档结构必须更改：

body
  #container
    ...content...
    #wrap-push
  #footer

添加了以下css：

html, body {
    height: 100%;
}
#container
{
    height: 100%;
    margin-bottom: -107px;
}
#wrap_push
{
    height: 107px;
}
#footer
{
    height: 80px;
}

---

请在代码中添加一个fiddle或jsbin！您想要一个始终位于页面底部的粘性页脚，而不管内容的长度，还是一个始终位于内容下方的页脚？@DoXick它必须位于内容下方，并且位于页面底部（不总是视口底部）okidoki，它是一个粘性页脚。创建一个jsfiddle，我会修改你的代码：-）@doxick在我的问题底部有一个链接的fiddle，这与我现在使用的

display:block

相同，所以它对我不起作用。

body
  #container
    ...content...
    #wrap-push
  #footer

html, body {
    height: 100%;
}
#container
{
    height: 100%;
    margin-bottom: -107px;
}
#wrap_push
{
    height: 107px;
}
#footer
{
    height: 80px;
}