Question

我正在尝试为响应式网站创建粘性页脚。我在互联网上搜索并找到了各种解决方案但我的问题是由于我的页脚中的文本数量，页脚更改的高度是自动换行。我已尝试在Ryan Fait的网站（http://ryanfait.com/resources/footer-stick-to-bottom-of-page/）上使用该方法，但由于您无法将页脚的高度视为静态值，因此很难设置CSS的推送值。目前我只是将页脚固定在底部，但这会导致问题，因为当页脚高度增加时，它会占用较小视口上的宝贵空间。以下是我的页脚下面有多少信息的示例。有什么建议吗？

<footer>
<div id="upperFooter">
<p>2000 - 2012 College Name | Copyright | Internet Privacy Policy | Disclaimer |      Collection and Use of Social Security Numbers</p>
</div>
<!-- end upperFooter -->
<div id="lowerFooter">
<p>College Name is a member of the Stated State College System.   College Name is not affiliated with any other public or private university or College in State or elsewhere. </p>
<p>College Name is a division of College Name and is accredited by the Commission on Colleges of the Association of Colleges (“XIXI”) to award the baccalaureate and associate degree. Contact the Commission on Colleges at for questions about the accreditation of College Name.</p>
</div>
<!-- end lowerFooter --> 
</footer>

Answer 1

尝试给页脚绝对定位

footer {
position: absolute;
bottom: 0;
}

Answer 2

我过去在Ryan Fait's code取得了很好的成功，但正如你所提到的，它对于可变高度的页脚效果并不好。

当页脚没有固定高度时，我发现的最佳解决方案是Flexbox solution

Flexbox很棒，前瞻性思维，所以我个人不介意你是否对某些旧版浏览器没有完全的支持。

Working example基于以下代码。我使用了一些供应商前缀，因此浏览器支持范围更广，但代码不那么干净

HTML

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Answer 3

您可以查看此博文：http://timothy-long.com/responsive-sticky-footer/

他使用display: table黑客来做，但演示页面工作正常。

您的另一个选择是使用媒体查询来调整页脚高度。

Answer 4

您可以尝试：Modern Clean CSS “Sticky Footer”。也许它会有所帮助。

使用带有position:absolute;的页脚并给它一个高度，然后将margin-bottom: (footer height);提供给您的包装器。

Answer 5

怎么样？ footer { position: fixed; bottom: 0; }

敏感的页脚响应站点

5 个答案: