CSS Floating Footer

css footer
Jon picture Jon · Jan 12, 2009 · Viewed 17.6k times · Source

I want to make a footer that stays at the bottom of the viewable window UNLESS it butts up against the content when you resize the window smaller.

I tried... bottom:0; position:absolute; ...but the footer gets in the way when the window is smaller.

Answer

roryf picture roryf · Jan 12, 2009

I believe this will do what you want: CSS layout: 100% height with header and footer. I've used it on a site and it can be tricky to implement depending on the complexity of your existing layout.

Related questions

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can't make sit at the bottom of the page. I want the footer to stick to the window bottom when the page …

Read More
Make div stay at bottom of page's content all the time even when there are scrollbars

CSS Push Div to bottom of page Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the complete bottom of the page, like Stack Overflow. …

Read More
Flushing footer to bottom of the page, twitter bootstrap

I am generally familiar with the technique of flushing a footer using css. But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. …

Read More