CSS Sticky Footer – Keep your footer at the bottom of the page

On larger monitors or web pages with a small amount of content you often find that the footer is floating halfway up the page. When really it should be stuck nicely to the bottom of the page at all times. There is a very simple way to keep your footer at the bottom of the page and it’s called CSS Sticky Footer.

CSS Sticky Footer is a simple method consisting of only CSS and HTML that keeps your footer stuck to the bottom of the page. It is cross browser friendly and takes only minutes to implement on your website. Let’s have a look at how it works and how to implement it on our website.

How Sticky Footer Works

The HTML Code

Below is an example of a basic website structure which contains a header across the top of the page, a main content area on the left, a sidebar on the right and a footer across the bottom of the page. You will need the “wrap”, “main” and “footer” div elements present in your website.

<div id="wrap">
    <div id="header">
        Your header goes here
    </div>
    <div id="main" class="clearfix">
        <div id="content">Your content goes here</div>
        <div id="sidebar">Your sidebar goes here</div>
    </div>
</div>

<div id="footer">
    Your footer goes here
</div>

The CSS Code

Below is the CSS that will make your footer stick to the bottom of the page along with the “clearfix” hack which will fix other floating layout issues. Simply add this CSS to your stylesheet and make sure that the three instances of the footer height below are all the same.

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;}

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

For further details please refer to the CSS Sticky Footer website.

Tags: bottom footer, css sticky footer, fixed footer, footer at bottom, keep footer at bottom of page, sticky footer