Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Adam Smallman
Adam Smallman
4,182 Points

Footer at the bottom of the browser

Hello, how do I make the footer stay at the bottom of the browser?

This is all the css on the footer div (

.footer{ width:100%; height:3em; background-color:black; border-bottom:2px #a19b88 solid; position:absolute; z-index:-2; margin-top:3em; }

)

Thanks for your help

6 Answers

Brian Feener
Brian Feener
Courses Plus Student 8,939 Points

Try something like this. You need to look at the parent elements and set the HTML and BODY tags and .wrapper to 100% height. Then add some padding to the bottom of your content to allow space for the footer. (That's why there is a "padding-bottom : 3em;" style definition.) THEN you position it at the bottom of the wrapper using absolute positioning. There may be other ways but this seems pretty compatible. Tested in Chrome and IE8. [Edit: Updated with markdown. ]

    <style>
    html,
    body { 
        height: 100%;           
        margin: 0;              
        padding: 0;             
    }
        .wrapper  { 
        height: 100%;       
        position: relative;                  
        background-color: orange; 
    }
    .content  { 
        background-color: green; 
        height: 150px; 
        width: 100%; 
    }
    .moreInfo { 
        background-color: purple; 
        width: 100%; 
        padding-bottom: 3em;    
    }
    .footer   { 
        height:3em;         
        background-color:black; 
        border-bottom:2px #a19b88 solid; 
        position: absolute;     
        bottom: 0;              
        left: 0;                
        width: 100%;
    }
    </style>

    <html>

    <body>
    <div class="wrapper">
    <div class="content"></div>
    <div class="moreInfo"></div>
    <div class="footer"></div>
    </div>
    </body>

    </html>
Matthew Underhill
Matthew Underhill
20,584 Points
Matthew Underhill
Matthew Underhill
20,584 Points

Hi Adam,

If you only want the footer to be at the bottom of the page when you scroll, this would simply depend on the height of your other elements on the page. The footer will only hit the bottom when there is enough stuff above it to make it hit the bottom of the browser screen. You either need more elements above your footer or you need to increase height of your existing elements.

Another way around though could be to use:

position: absolute; bottom: 0;

Matthew Eaton
Matthew Eaton
10,669 Points
Matthew Eaton
Matthew Eaton
10,669 Points

Do you want it to always be visible? (i.e. "fixed") Or would you like it to be simply at the bottom of the page once you scroll down?

Adam Smallman
Adam Smallman
4,182 Points

Simply at the bottom of the page

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

Simply at the bottom of the page

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

I thought i got it working but I test my site on my big monitor and the footer is not at the bottom of the browser, there is a gap of about 400px.

Matthew Underhill
Matthew Underhill
20,584 Points
Matthew Underhill
Matthew Underhill
20,584 Points

Hi Adam,

What is the parent element of your footer? By default, your footer will be positioned absolute based on the closest parent element that has a position setting other than the default value of fixed. Set the element that is the parent of your footer and give it a position of relative.

If that doesn't work, please put up your HTML and CSS on here so we can help diagnose the problem.