CODEWITHSUNDEEP
htmlcssfooter
Oli Fletcher
Oli Fletcher

Reputation: 309

Getting a footer to stick to the bottom of the page

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:[email protected]">[email protected]</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;
}

Upvotes: 0

Views: 5369

Answers (4)

Khanh TO
Khanh TO

Reputation: 48982

#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

Upvotes: 5

Mark Busnelli Jr
Mark Busnelli Jr

Reputation: 435

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

Upvotes: 0

BitLion
BitLion

Reputation: 103

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

Upvotes: 0

user2376024
user2376024

Reputation: 1

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.

Upvotes: 0

Related Questions