1

我正在尝试为响应式网站创建一个粘性页脚。我在互联网上搜索并找到了各种解决方案，但我的问题是由于页脚中的文本数量，页脚的高度变化是自动换行的。我试过在 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>
4

5 回答 5

1

过去，我在Ryan Fait 的代码中取得了很好的成功，但正如您所提到的，它不适用于可变高度的页脚。

当页脚不是固定高度时，我发现的最佳解决方案是这个Flexbox 解决方案

Flexbox 非常棒且具有前瞻性，因此我个人不介意您不会完全支持某些较旧的浏览器。

基于以下代码的工作示例。我使用了一些供应商前缀，因此更广泛的浏览器支持，但代码不是那么干净

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;
}
于 2014-12-16T13:40:52.567 回答
1

尝试给页脚绝对定位

footer {
position: absolute;
bottom: 0;
}
于 2012-08-03T12:30:05.697 回答
0

您可能想查看这篇博文：http: //timothy-long.com/responsive-sticky-footer/

他使用display: tablehack 来做到这一点，但演示页面确实可以正常工作。

您的另一个选择是使用媒体查询来适应页脚高度的变化。

于 2013-04-03T00:51:22.247 回答
0
于 2014-12-16T12:34:36.097 回答
-3

关于什么 footer { position: fixed; bottom: 0; }

于 2012-09-22T06:14:06.033 回答