How to keep footers at the bottom of the page

When developing a site sometime there is not enough content on the page to push your footer to the bottom of your viewport. There are a few fixes out there such as Matthew Taylor’s solution found here with is the one I use the most.  This solution works the best for footers that are inside of the wrapper or a wrapper with the same background color of the wrapper. But more often than not the designer I work with designs with a full width footer outside of the the main wrapper with the body background color being different than the wrapper. So I took sometime to figure out the best way to have the footer stick to the bottom and the wrapper expand to the bottom as well. Because this was inspired by our designer Jude Goergen I have designed to call this a Juoter.

My code seems to work in in IE7-9, Chrome and Firefox. I am too lazy to test it in anything else.

View a demo of my code.

Visual Representation of what this will fix.

[one_half]

Footer As low as the Content.

[/one_half]

[one_half_last]

Footer at bottom. No expanding wrapper.

[/one_half_last]

 

Footer on Bottom and Expanding wrapper!

The bare bones to get this to work is displayed below. Or download it from here!

CSS

html,
body {
margin:0;
padding:0;
height:100%;
background:#333;
}
#wrapper {
background: #FFF;
min-height:100%;
position:relative;
width:960px;
margin:0 auto;
margin-bottom:-60px; /* Negitive Height of Footer */
}
#header {
background:#ff0;
padding:10px;
position:relative;
}
#body {
padding:10px;
padding-bottom:80px; /* Height of Footer and some change */
background:#FFF; /* Wrapper BG COLOR */
}
#footer_wrapper{
margin:0 auto;
width:960px;
padding:10px;
}
#footer {
position: relative;
width:100%;
height:60px; /* Height of Footer */
background:#6cf;
}

HTML Div Markup

<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
</div>
<div id="footer">
<div id="footer_wrapper">Footer</div>
</div>

Features:

  • Footer Always On Bottom
  • Footer gets pushed down with content
  • Wrapper Expands to bottom of View Port
  • No Javascript
  • Valid CSS (i think, prove me wrong)
  • Wide Range of Browser Compatibility
  •  Adaptable to Many Layouts
  • Free to Use!
Advertisements

Author: Phil Hoyt

Web Developer, WordPress Expert, Marketing Enthusiast

2 thoughts on “How to keep footers at the bottom of the page”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s