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

将位置设置为绝对会使整个页脚在页面的某处消失，所以我不能只改变它。

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

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

修改

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

Answer 1

您所描述的内容是位于内容底部的页脚。在页脚div中定义内容是不必要的信息。对于我们所关心的所有人，你可以在页脚中放置一个钻石独角兽。所需的真实信息是基本布局，即标题区域，内容区域，侧边栏区域，页脚区域。

这是一个现场演示{* 3}}

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

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

您需要一个容器来占据视图区域，并将页脚div设置为容器的绝对底部，它将位于底部。内容“body”将根据需要扩展容器，并且页脚每次都在内容的下方。 div默认情况下有一个display：block，所以每次都会推送到下一行。

Answer 2

我在我制作的任何网站上使用此代码，这对我有用 -

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

Answer 3

我相信你所有的position: fixed都会导致问题，因此我已尝试在JSFiddle中为您清理它。

职位：固定;设置相对于浏览器窗口的div位置，而不是页面。

Answer 4

我已修改您的JSFiddle以申请'sticky footer'。

您的文档结构必须更改：

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

添加了这个css：

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

保持页脚低于内容的麻烦

4 个答案: