响应站点的粘性页脚 [英] Sticky Footer for Responsive Site

问题描述

我想为响应式网站创建一个粘性页脚。我搜索互联网，并找到了各种解决方案，但我的问题是，由于我的页脚中的文本的数量，页脚的高度变化是文字换行发生。我已尝试在Ryan Fait的网站上使用此方法（ http：// ryanfait.com/resources/footer-stick-to-bottom-of-page/ ），但由于您无法将页脚的高度视为静态值，因此很难设置CSS。目前我只是将页脚固定到底部，但这是造成一个问题，因为当页脚增加高度，它占据了较小的视口的宝贵的空间。这里有一个例子，在我的页脚下面有多少信息。有任何建议吗？

I'm trying to create a sticky footer for a responsive website. I've search the internet and have found various solutions but my problem is that due to the amount of text in my footer, the height of the footer changes are word-wrap occurs. I've tried using the method on Ryan Fait's site ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ) but since you can't account for the height of the footer being a static value, it's hard to set the push value for the CSS. Currently I just have the footer fixed to the bottom, but that's causing a problem because as the footer increases in height, it's taking up valuable space on smaller viewports. Here's an example of how much info is in my footer below. Any suggestions?

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

推荐答案

尝试给予页脚绝对定位

footer {
position: absolute;
bottom: 0;
}

这篇关于响应站点的粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！