1

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>
Jason Tremain
  • 1,259
  • 3
  • 20
  • 35
  • 1
    Maybe scrape out any unnecessary content using media queries. When displaying content on mobile devices you should really only have the most relevant content displayed. Another option would be to stack navigation for mobile. Change the layout using media queries. – khollenbeck Jul 31 '12 at 20:07
  • Kris's idea is a good one, as far as making the footer take up less space is concerned. When the text is already pretty small, and if you want it to be usable (which obviously you do, if you're going to the trouble of making it responsive) then taking out some elements seems like the way to go. Another idea would be to hide the footer (set `bottom: -150px;` or whatever) and allow the user to tap once to view copyright info. – acsmith May 07 '13 at 02:18
  • See [this example](http://stackoverflow.com/a/20114486/618649). Use @media queries to fix the footer height for each screen resolution you care about, etc. – Craig Tullis Dec 01 '13 at 21:30

5 Answers5

1

Try giving the footer absolute positioning

footer {
position: absolute;
bottom: 0;
}
Raj
  • 350
  • 1
  • 2
  • 15
  • I think I tried that initially. The way the page is built out is there's a header div, container div then a footer div. When I style the footer to position "absolute", it causes the footer to scroll with the page, which of course I don't want to happen. – Jason Tremain Aug 06 '12 at 12:10
  • If the container div has some blocks floated left/right like the sidebar then may be implementing overflow: auto; to the container will solve any positioning problem with the footer. But it's very hard to know what is causing the problem without looking at the entire html and css, if possible please provide the codes. – Raj Aug 06 '12 at 12:51
1

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;
}
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
0

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.

jlovison
  • 1,126
  • 1
  • 10
  • 12
  • But as I can see that sticky footer doesn't fit to bottom in latest version of Chrome... Also, if you start playing with the css it makes strange behaviours, like the header or the content jumps down. – Arkana Apr 16 '13 at 07:55
  • 1
    The best solution for a variable footer height is media queries based on the width at the breakpoints where the height changes. You just need it to be static content to write them correctly. The above suggestions were the closest that fit what the OP was looking for. – jlovison Apr 23 '13 at 09:08
0

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.

Anca Breje
  • 9
  • 2
  • Could you summarize the main conclusions of the link so that the answer will be there in the event that the post should disappear? Thanks. – C R Dec 16 '14 at 12:36
-3

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

CharlieLukeUK
  • 1