响应式网站的粘性页脚答案

【问题标题】：Sticky Footer for Responsive Site响应式网站的粘性页脚
【发布时间】：2012-07-29 16:25:21
【问题描述】：

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

【问题讨论】：

也许可以使用媒体查询刮掉任何不必要的内容。在移动设备上显示内容时，您实际上应该只显示最相关的内容。另一种选择是为移动设备堆叠导航。使用媒体查询更改布局。
Kris 的想法是个好主意，就让页脚占用更少的空间而言。当文本已经很小，并且如果您希望它可用（显然您会这样做，如果您要麻烦使其响应式），那么取出一些元素似乎是要走的路。另一个想法是隐藏页脚（设置bottom: -150px; 或其他）并允许用户点击一次以查看版权信息。
见this example。使用@media 查询来修复您关心的每个屏幕分辨率的页脚高度等。

标签： html css responsive-design sticky-footer

【解决方案1】：

尝试给页脚绝对定位

footer {
position: absolute;
bottom: 0;
}

【讨论】：

我想我最初尝试过。页面的构建方式是有一个页眉 div、容器 div 和一个页脚 div。当我将页脚设置为“绝对”位置时，它会导致页脚随页面滚动，这当然是我不希望发生的。
如果容器 div 有一些块像侧边栏一样向左/向右浮动，那么可能正在实现溢出：自动；到容器将解决页脚的任何定位问题。但是如果不查看整个 html 和 css 很难知道是什么导致了问题，如果可能，请提供代码。

【解决方案2】：

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

【讨论】：

OP 声明他们当前使用的页脚固定在底部。

【解决方案3】：

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

他使用display: table hack 来实现，但演示页面运行良好。

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

【讨论】：

但是我可以看到，在最新版本的 Chrome 中，粘性页脚不适合底部...此外，如果您开始使用 CSS，它会产生奇怪的行为，例如标题或内容跳下来。
可变页脚高度的最佳解决方案是基于高度变化的断点处的宽度进行媒体查询。您只需要它是静态内容即可正确编写它们。上述建议是最符合 OP 所寻求的建议。

【解决方案4】：

你可以试试这个：Modern Clean CSS “Sticky Footer”。也许会有所帮助。

使用带有position:absolute; 的页脚并为其指定高度，然后将margin-bottom: (footer height); 指定给您的包装器。

【讨论】：

您能否总结一下链接的主要结论，以便在帖子消失的情况下会有答案？谢谢。

【解决方案5】：

我过去在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;
}

【讨论】：