CODEWITHSUNDEEP
layoutsticky-footercss
Lester Peabody
Lester Peabody

Reputation: 1888

CSS auto height and sticky footer

I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?

Thanks for the help.

Upvotes: 1

Views: 3645

Answers (3)

swisstony
swisstony

Reputation: 1715

Give this one a try. http://www.cssstickyfooter.com/ (link no longer valid)

It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).

Upvotes: 1

BizNuge
BizNuge

Reputation: 938

Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.

http://jsfiddle.net/biznuge/thbuf/8/

You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.

Pitfalls of this method are:

  • You need to provide some padding/margin at the bottom of the '#main' element so that the footer is displaced further than it naturally would, so need to know at least a broad range of what your footer height should be.
  • IE doesn't seem (<=IE8 not tested 9) to recognize browser resize events if you only resize the bottom edge of the browser, so in that particular case the stickiness would fail, until a horizontal resize was also presented as an event.
  • if you want a fixed width to the layout you should place this constraint not on the '#container' element, but on the '#page' element, and perhaps introduce extra elements beneath '#footer' to provide any width constraints there.

Good Luck!

Upvotes: 0

Mr.T.K
Mr.T.K

Reputation: 2356

You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px 

<div id="wrapper">
  ---
 ------
</div>
<div id="footer">
</div>

# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}

Upvotes: 0

Related Questions