How to Keep Page Footer at the Bottom with CSS

Sounds like a silly topic, but it is a fairly common problem. In fluid layouts, the footer only comes as far as the end of the content. If you have a lot of content and it overflows the screen, then no problem; however, if your content is smaller than the height of the screen, and your CSS is not set up correctly, you will notice the footer looks out of place. Here is an example. Shouldn’t the footer by at the bottom of the page? Yes, and it’s simple to do.

 

The HTML

Here is a basic HTML page with header, content, and footer divs within a wrapper div.

<html>
<head></head>
<body>
    <div class="wrapper">
        <div class="myHeader">My Page Header</div>
        <div class="myContent">
            <h3>Content Area</h3>
            All content text here....
        </div>
        <div class="myFooter">Copyright Footer 2015</div>
    </div>
</body>
</html>

 

The CSS

This is where all the magic happens…in the CSS.

  • First we set the html’s and body’s height to 100% to make sure it spans the whole screen.
  • For the wrapper class, we set the min-height to 100% to make sure it will always fill up the page.
  • A bottom padding is set to accommodate the footer because the footer will actually overlap the content area. The footer here is 50 pixels, so we set the content’s bottom padding to 50px.
  • Now, to make the footer stick to the bottom, we simply set the position to absolute and bottom margin to 0.
<style>

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

    .wrapper {
        margin:0;
        padding:0;
        min-height: 100%;
        position:relative;
    }
    
    .myHeader {
        background-color:#aaa;
        font-size: 32px;
        height:75px;
    }
    
    .myContent {
        padding-bottom:50px;
    }
    
    .myFooter{
        font-size: 24px;
        background-color:#333;
        height: 50px;
        color:#fff;
        position:absolute;
        bottom: 0px;
        width:100%;
    }

</style>

 

The Result

With just a few CSS properties applied to the appropriate elements, we are able to make our footer behave like how all footers should behave. Here is the final result.

 

You may also like...

2 Responses

  1. S. Patel says:

    exactly what i was looking for, thanks

  2. Angeles says:

    webdevunlimited.com has potential, you can make your blog go viral easily using one tricky
    method. Just search in google:
    Kelashy’s Method To Go Viral

Leave a Reply

Your email address will not be published. Required fields are marked *