html - 响应式网站的粘性页脚

Question

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

<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;
}