…and other CSS Frameworks
“Sticky Footers” are containers that stick to the bottom of every page, no matter how much whitespace is between the footer and the preceding content. A popular method involves fixed height, negative margins & paddings as well as a number of hacks to ensure cross-browser compatibility.
Here’s how you adapt CSS Sticky Footer to the 960.gs Grid CSS Framework:
Quick Steps
- Add the footer CSS to your 960.css
- Search & Replace
150pxin the CSS with the real height of your footer - You need the elements
#wrapperand#contentin your HTML above the footer (see example)
Before
This might be how part of your website looks now:
HTML (before)
<body>
<div id="content" class="container_16">
<!-- Content -->
</div>
<div id="footer">
<!-- Footer -->
</div>
</body>After
This sticky footer needs two surrounding wrappers above it, so go ahead and add another around #content. I’ve called it #wrapper in this example:
HTML (after)
<body>
<div id="wrapper">
<div id="content" class="container_16">
<!-- Content -->
</div>
</div>
<div id="footer">
<!-- Footer -->
</div>
</body>Here’s how the CSS should look, this example assumes your footer is 150px high.
CSS
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca http://www.cssstickyfooter.com
*/
html, body, #wrapper {height: 100%;}
body > #wrapper { height: auto; min-height: 100%; }
/* must be same height as the footer */
#content { overflow: auto; padding-bottom: 150px; }
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
content: "";
height:100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J */
}