如何在内容 DIV 处停止粘滞页脚答案

【问题标题】：How to Stop Sticky Footer at Content DIV如何在内容 DIV 处停止粘滞页脚
【发布时间】：2013-04-21 23:55:51
【问题描述】：

我一直在调整我的粘性页脚，希望在它到达#body div 时停止它，但到目前为止，我一直没有成功。在大多数情况下，它通常不会覆盖内容，但on this page，它通常会覆盖。

如果可能的话，我想把它固定在窗口的底部，但我能想出的唯一其他解决方案是固定位置。有什么建议吗？

【问题讨论】：

为什么不直接使用fixed？
对我来说，当我的“版权”总是贴在窗口底部时，它看起来更干净，而不是骑在我的内容的尾巴上（尤其是背景图像）。

【解决方案1】：

我不确定你想要的结果，但可能是你所需要的：

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

【讨论】：

这不会阻止与我的内容发生冲突。如果窗口调整大小，我希望页脚在我的内容 div 的底部下降。

【解决方案2】：

嗯，您可以通过多种方式应用固定位置/粘性页脚。一种选择是仅使用 CSS，如 Twitter Bootstraps Sticky Footer example。这可能是最简单的实现了。

  /* The html and body elements cannot have any padding or margin. */
  html,body { height: 100%; }

  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
  }

  /* Set the fixed height of the footer here */
  #push,#footer{ height:100px }
  #footer {}

【讨论】：

我不明白#push div 的用法。那里的逻辑是什么？
阅读 Elias 的帖子。他的方法非常相似，他解释了#push 元素。它还可以防止内容与页脚重叠。
@darcher 那是因为它是相同的方法，只是在原始上下文中。 twitter bootstrap 的粘性页脚使用了我提供的相同页脚，它只是原始来源。其中之一在应得信用的情况下给予信用。

【解决方案3】：

根据Ryan Fait，您可以在文档 layout.css 中使用以下 CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em; /*-4em represents the height of the footer */
 }
 .footer, .push {
    height: 4em;
 }

以及下面的 HTML 标记，实际上实现起来非常简单，并且适用于所有主流浏览器。

<html>
<head>
    <link rel="stylesheet" href="layout.css" ... />
</head>
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Website Footer Here.</p>
    </div>
</body>
</html>

我之前已经实现过它，它可以完美地让页脚粘在页面底部或内容的底部，而且它根本不需要 jquery 或 javascript。

为了回应 kurzweilguy 的comment，推送使您可以将页脚置于100% 高度，这自然会扩展页面以具有滚动条，因此您可以设置负边距来应对它将其恢复以使其适合页面底部。 darcher 引用的页脚使用完全相同的页脚。这是一个非常好的编译页脚！

【讨论】：