Make the Footer Stick to the Bottom of a Page

When a page contains a large amount of content, the footer is pushed down off the viewport, and if you scroll down, the page ‘ends’ at the footer. However, If the page has small amount of content, the footer can sometimes ‘cling’ to the bottom of the content, floating halfway down the page, and leaving a blank space underneath, which looks ugly. So we need to make the footer stick to the bottom of page (not always fixed and visible).

View Demo

Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it’s always fixed to the bottom regardless of screen size from now on anyway. I have tried a number of ways such as bottom: 0x; position:absolute; etc. Never seems to work very well, occasionally pushes the footer out of its container to fix to the bottom using some of those examples right there. I have even seen people fixing it with JavaScript, finding out the height of the page and pushing the footer down after page load. But we are using simple CSS rules to let the footer stick to bottom in case of content height is less than viewport height.

Make the Footer Stick to the Bottom of a Page

This CSS sticky footer code pushes a website’s footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers. If our HTML is like :

<body>
    <div id="wrapper">
        <div id="header"></div>
	<div id="content"></div>
	<div id="footer"></div>
    </div>
</body>

<body>

</div>

</body>

In this HTML, we have a wrapper which is a container for all the page content and we are going to set the CSS of footer relative to wrapper. Add the following lines of CSS to your stylesheet to make the Footer Stick to the Bottom of a Page.

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    min-height:100%;
    position:relative;
}

#header {
    background:#CCC;
    padding:10px;
}

#content {
    padding-bottom:100px; /* Height of the footer element */
}

#footer {
    background:#222;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

html, body {

margin:0;

padding:0;

height:100%;

}

#wrapper {

min-height:100%;

position:relative;

}

#header {

background:#CCC;

padding:10px;

}

#content {

padding-bottom:100px; /* Height of the footer element */

}

#footer {

background:#222;

width:100%;

height:100px;

position:absolute;

bottom:0;

left:0;

}

The padding-bottom in #content for the margin is the same number as the height of #footer (including any padding or borders you may add). Because here #footer has the position:absolute relative to wrapper means #content will reach to bottom of the page so we need to create the space for bottom by adding padding-bottom to the #content as the same height of the footer. But what if We don’t have wrapper element in the page like

<body>
    <div id="header">
     Header content here
    </div>
    <div id="content">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div id="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

<body>

Header content here

</div>

<p>Your website content here.</p>

</div>

</div>

</body>

Add the following lines of CSS to your stylesheet to make the Footer Stick to the Bottom of a Page.

html{ 
    position:relative; 
    min-height:100%;
}

#content { 
    height: 100%; 
    margin: 0 auto 50px;
}

.push {
    height: 50px;
}

#footer {
    height: 50px;
    position:absolute;
    bottom:0;
}

html{

position:relative;

min-height:100%;

}

#content {

height: 100%;

margin: 0 auto 50px;

}

.push {

height: 50px;

}

#footer {

height: 50px;

position:absolute;

bottom:0;

}

Or we can also do it as follows :

html, body {
    height: 100%;
}

#content{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
}

#footer, .push { 
    height: 50px;
}

html, body {

height: 100%;

}

#content{

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -50px;

}

#footer, .push {

height: 50px;

}

Make the Footer Stick to the Bottom of a Page

View Demo

Make the Footer Stick to the Bottom of a Page

View Demo

1 COMMENT

Leave a Reply Cancel reply