Question

无论我尝试什么（stackoverflow上的教程/帖子，w / e）我都无法让我的页脚留在我的网站底部。

我为Wordpress创建了这个自定义主题（我没有在wordpress stackexchange上发布它，因为这是一个CSS问题而不是WP问题）。无论如何，这是我的网站： http://plexus-orthopedie.nl/wordpress/?page_id=1941

我没有在我的页脚或任何CSS中添加任何内容，所以如果有人想尝试CSS代码，那很容易。

页脚位于：

html > body > div#page > footer.site-footer

提前致谢！

Answer 1

可能会在你的css风格中添加这样的东西。

#page .site-footer {
    background-color: #123456;
    width: 100%;
    position: fixed;
    height: 100px;
    bottom: 0;
}

我添加了背景色以使其现在可见。

修改

如果您希望页脚仅显示在底部，而不是与您一起滚动，请添加此内容而不是上面的内容：

#page .site-footer {
    background-color: #123456;
    width: 100%;
    position: relative;
    height: 100px;
    margin-top: 100%;
}

<小时/> 编辑2
我发现了问题！

您必须更改div＃内容样式。

而不是

div#content{
    position: absolute;
}

使用它：

 div#content{
     position: relative;
 }

将#page .site-footer的样式更改为：

#page .site-footer {
    background-color: #123456;
    width: 100%;
    position: relative;
    height: 100px;
    bottom: 0;
}

问题是由位置：#content中的绝对值引起的。

Answer 2

使用一个技巧：

http://css-tricks.com/snippets/css/sticky-footer/
http://getbootstrap.com/examples/sticky-footer

OR

<强> CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

<强> HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sticky Footer Template for Bootstrap</title>
  </head>

  <body>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer</h1>
      </div>
    </div>

    <div id="footer">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </body>
</html>

Answer 3

好的，在更详细地查看您的问题后（即时工作），我发现您需要删除/添加以下内容。

删除div id =“page”

删除div id =“content”

将以下css添加到div id =“primary”

max-width: 980px;
margin-left: auto;
margin-right: auto;

向页脚添加内容，您会看到它现在正在运行。

编辑：css到标题标记

top: 0px;

Answer 4

怎么样：

.site-footer {
  position: fixed;
  bottom: 0px;
}

要查看您的页脚，您当然需要内容...或者添加固定的宽度和高度以及背景颜色

Answer 5

我刚刚遇到过这个问题，或者至少有一个类似的问题。我发现我的.wpwrap

中有一个额外的结束div标签

.wpfooter应该在.wpwrap里面，以便坚持它的底部（使用pos：absolute＆amp; bottom 0方法）

额外的结束标记导致.wpwrap和.wpfooter成为兄弟姐妹，所以.wpfooter绝对定位于身体。

值得检查html结构以查看.wpfooter的呈现位置。

我希望这是有道理的，希望能帮助别人！：）

Answer 6

不知道为什么，但这对我有用：

    #page .site-footer {

    width: 100%;
    position: absolute;
    height: 100px;
    margin-top: 100%;
}

Answer 7

如果您正在寻找快速解决方案，请使用此

在您的CSS中添加#footer { top: 100vh; position:relative; width: 100%;}

在您的html中添加<div id="footer"><p>Hey look I was forced to be at the bottom</p></div>

我希望这会有所帮助，但请记住，在设计页面时，唯一不应静态设置的是高度！

最好的方法是在div内容中设置一个最小高度，或者如果您对容器甚至是身体标签感到懒惰！通常，我对主体标签min-height: 100vh执行此操作，这将使页脚始终位于底部，而不必担心将来的页面！

快乐的编码

页脚没有粘在底部

7 个答案: