Question

我无法使粘性页脚起作用。从本质上讲，我希望它能够完成这个演示所做的事情

http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

我已经尝试过十几个教程试图让它工作，我就是做不到。有人可以帮我吗？这是我的网站（它正在运行Wordpress 3.4.1）

http://hgsupport.x10.mx/support/

由于

Answer 1

也许你的CSS中有这样的东西？

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

Answer 2

在您链接的示例上使用Chrome Inspector（它显示了DOM树，应用于元素的CSS规则，为您提供了真正的JS控制台以及更多工具和信息），我看到他将以下CSS应用于他的页脚div：

#footer{
    position: absolute; /* Allows you to position the element anywhere
                           you want without affecting other elements */
    bottom: 0;  /* Distance from bottom of element to bottom of page set to 0 */
    height: 60px; /* Footer is 60 pixels high, not too important */
    width: 100%;  /* width of footer is all the width of the parent element, which
                    is all available space here. */
}

如果您希望页脚位于屏幕的底部而不是页面，则必须在上面的代码中将position: absolute替换为position: fixed。

查看源代码（在大多数浏览器中使用Ctrl-U）并查看CSS也可以。

Answer 3

position: fixed;
bottom: 0;

这是相关的CSS。您可以在http://jsfiddle.net/ZZYPK/

查看示例

编辑：包含大量示例文字的示例，以显示它位于页面底部：http://jsfiddle.net/ZZYPK/1/

Answer 4

尝试查看此设置是否符合您的需求：http://jsfiddle.net/yceaS/。

关键部分是让包装div与您的内容和页脚分开div，然后使用CSS规则来修复定位

Answer 5

我遇到了和你一样的问题，这对我来说也是如此！

这是CSS：

html{
   height: 100%;
}
body{
   height: 100%;
}
.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   /*The -100px mentioned above needs to be the exact height of the footer.*/
}
.footer{
   height: 100px;
   clear: both;
   position: relative;
}
.nudge{
   height: 100px;
   clear: both;
}

HTML的格式如下：

<html>
  <body>
    <div class="wrapper">
      Your main content goes in here
      <div class="nudge"></div>
      <!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
    </div><!--END class="wrapper" -->
    <footer>
      Your footer content goes in here
    </footer>
  </body>
</html>

轻推是网上和其他答案中所有其他解决方案所缺少的。

来源：http://www.davidjrush.com/blog/2009/01/css-sticky-footer/

试图让Sticky Footer正常工作

5 个答案: