0

我一直在调整我的粘性页脚，希望一旦它击中#bodydiv 就停止它，但到目前为止，我一直没有成功。在大多数情况下，它通常不会覆盖内容，但在此页面上，它通常会覆盖。

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

4

3 回答 3

1

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

  /* 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 {}
于 2013-04-28T05:27:54.577 回答
0

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

#footer {
  position: fixed;
  bottom: 0;
  left:0;
  right:0;
}
于 2013-04-28T05:15:17.030 回答
0

根据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 的评论，推送使您可以将页脚置于100%高度，这自然会扩展页面以具有滚动条，因此为了应对它，您可以在其上放置负边距以使其恢复它适合页面底部。darcher引用的页脚使用完全相同的页脚。这是一个非常好的编译页脚！

于 2013-04-28T05:49:01.783 回答