Question

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

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

Answer 1

好吧，您可以通过多种方式应用固定位置/粘性页脚。一种选择是仅使用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 {}

Answer 2

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

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

Answer 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引用的页脚使用相同的页脚。这是一个非常精心编译的页脚！

如何在内容DIV上停止粘滞页脚

3 个答案: