Getting a footer to stick to the bottom of the page

Question

I am currently building a website and require my footer to stick to the bottom of the page - I am struggling somewhat - beneath is an example of my HTML and my CSS - I need the footer to stay at the bottom if the page is small but grow with the page if it gets bigger. HTML:

<div class="container">
    <div class="main">
        <!-- some content -->
    </div>
</div>
<div class="clear"></div>
    <div id="footer">
        <div class="container">
            <div class="footer_nav">
                <h4>Site Map</h4>
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="food.php">Example Page 1</a></li>
                    <li><a href="#">Example Page 2</a></li>
                    <li><a href="#">Example Page 3</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="footer_copy">
                <p>&copy;<?php echo date('Y');?> Oliver Fletcher<br/>
                All Rights Reserved</p>
                <h4>Where I learnt...</h4>
                <img src="images/accreditations.jpg" alt="Team Treehouse">
            </div>
            <div class="footer_social">
                <a href="https://twitter.com/fletcher_oli" target="_blank"><img src="images/twitter.png" alt="Twitter"></a>
                <a href="https://www.facebook.com/oli.fletcher" target="_blank"><img src="images/facebook.png" alt="Facebook"></a>
                <a href="https://www.linkedin.com/e/fpf/183035612" target="_blank"><img src="images/linkedin.png" alt="LinkedIn"></a>
                <a href="https://plus.google.com/106172283538461109605/about" class="google" target="_blank"><img src="images/google.png" alt="Google"></a>
                <h4>Get in touch</h4>
                <a href="mailto:oli@thewebshare.co.uk">oli@thewebshare.co.uk</a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>

CSS

html{
    height: 100%;
}  

.container{
    width: 980px;
    margin: auto;
    min-height: 100%;
    _height: 100%;
}

.main{
    margin-bottom: -183px;
    position: relative;
}

#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: relative;
padding: 20px 0;
height: 183px;
}

possible duplicate of [CSS to make HTML page footer stay at bottom of the page with a minimum height](http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height) — tw16, Jun 06 '13 at 22:18

Khanh TO · Accepted Answer · 2013-06-07T11:00:18.350

5

#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: fixed;
bottom:0px;
padding: 20px 0;
height: 183px;
}

Use position:fixed and bottom:0px

edited Jun 07 '13 at 11:00

answered Jun 07 '13 at 09:04

Khanh TO

48,509
13
99
115

this would be great but allows the footer to be visible all the time, I would just like it to be at the bottom, but on search result pages that return no results I would like the footer to stay at the bottom – Oli Fletcher Jun 07 '13 at 15:15

score 0 · Answer 2 · answered Jun 06 '13 at 22:29

One problem I see is the duplicate use of the container class. You should have the container for the content and the container for the footer using separate class names, or you could use the css selector

    body > .container

Otherwise, I'd try to switch the css for the .main to have the css rules below. The height and padding needs to be a equal fixed size.

    .main
        padding-bottom: 100px;
    .footer
        height: 100px; // FIXED HEIGHT IS IMPORTANT

There's a lot of examples of this on the internet. I used this one and found that it worked well. Hope this helped.

score 0 · Answer 3 · answered Jun 06 '13 at 22:29

What you want is assign CSS elements to .clear under your #container and above your #footer. You want it essentially push the footer down so it sticks to the bottom.

This tutorial helped me, the whole page is dedicated to a sticky footer.

Sticky Footer Tutorial

score 0 · Answer 4 · answered Jun 06 '13 at 22:57

0

Obviously there are many methods to this. Following this tutorial will do the trick as well:

http://www.cssstickyfooter.com/using-sticky-footer-code.html

answered Jun 06 '13 at 22:57

Mark Busnelli Jr

435
3
10

Getting a footer to stick to the bottom of the page

4 Answers4