2

我无法让粘性页脚工作。本质上，我希望它完全符合这个演示的功能

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

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

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

谢谢

4

5 回答 5

0 
position: fixed;
bottom: 0;

那是相关的CSS。您可以在http://jsfiddle.net/ZZYPK/看到一个示例

编辑：带有大量示例文本的示例以显示它位于页面底部：http: //jsfiddle.net/ZZYPK/1/

于 2012-07-30T20:23:01.877 回答
0

我和你有同样的问题，这为我解决了！

这是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/

于 2012-11-03T04:30:18.893 回答
0

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

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

于 2012-07-31T11:26:18.867 回答
0

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

#footer
{position: fixed; bottom: 0;}
于 2012-07-30T19:13:19.190 回答
0

在您链接的示例中使用 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 也可以。

于 2012-07-30T19:16:12.260 回答