Sticky Footer for Responsive Site

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>

Try giving the footer absolute positioning

footer {
position: absolute;
bottom: 0;
}

I've had good success with Ryan Fait's code in the past, but as you mention, it doesn't work well for variable height footers.

The best solution I've found when the footer isn't a fixed height is this Flexbox solution

Flexbox is awesome and forward thinking, so personally I don't mind if you won't have full support for some older browsers.

Working example based on code below. I've used some vendor prefixes so wider browser support but code not so clean

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

You might want to check out this blog post: http://timothy-long.com/responsive-sticky-footer/

He uses the display: table hack to do it, but the demo page does work fine.

Your other option is using media queries to adapt the footer height as it changes.

You can try this: Modern Clean CSS “Sticky Footer”. Maybe it will help.

Use a footer with: position:absolute; and give it a height, then give margin-bottom: (footer height); to your wrapper.

What about footer { position: fixed; bottom: 0; }

来源：https://stackoverflow.com/questions/11747983/sticky-footer-for-responsive-site

标签

css

html5

css3

responsive-design

sticky-footer