试图让粘性页脚工作

Posted 2023-03-21

技术标签:

【中文标题】试图让粘性页脚工作【英文标题】：Trying to get a Sticky Footer working 【发布时间】：2012-07-28 11:58:28 【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

这些解决方案中的任何一个对您有用吗？如果是，你能接受正确答案吗？ 【参考方案1】：

你的 CSS 中可能有类似的东西吗？

#footer
position: fixed; bottom: 0;

【讨论】：

【参考方案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 也可以。

【讨论】：

【参考方案3】：

position: fixed;
bottom: 0;

这就是相关的 CSS。你可以在http://jsfiddle.net/ZZYPK/看到一个例子

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

【讨论】：

不是我想要的。如果您添加内容并调整窗口大小，它会与内容重叠。在我的示例中，页脚在到达内容时停止【参考方案4】：

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

关键部分是有一个包装器div 与您的内容和您的页脚在单独的div 中，然后使用CSS 规则来修复定位

【讨论】：

这不起作用；我刚试过。我有一个页脚，一个用于页脚的包装器，然后在最底部有另一个带有自己包装器的页脚（这是我可以让页脚保持 100% 的唯一方法，同时保持页脚的垂直边距）。我也没有 html 文件，所以我将 HTML 代码添加到 page.php 文件中（不知道是否正确）。我在我的代码中留下了我所做的事情【参考方案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/

【讨论】：

以上是关于试图让粘性页脚工作的主要内容，如果未能解决你的问题，请参考以下文章