SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Sticky footer

  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky footer

    Hey guys,

    I'm trying to make my footer stick to the bottom of the page. I know, I know there are milions of tutorials on google.... believe I've gone through most of them. Problem I have is that as soon as I set my html, body to height 100% I automatically get a scroller and the footer gets pushed way down even though there is no content. I've tried doing negative margins but that only pulls the footer higher and the scroller still stays the same, with empty space after the footer. Here is my code:

    CSS:

    html, body {height: 100%;}

    div#container {min-height: 100%; margin: 0px auto 0px;}

    div#footer{background: #333;height: 140px; position:relative; margin: 0px auto 0;}

    HTML:

    <body>
    <div id="container">
    <p>text1</p>
    </div>

    <div id="footer">
    <p>text2</p>
    </div>
    </body>

    Any help would be greatly appreciated. This is my second day trying to figure this out, so thanks in advance.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, that's because for 1, you dont reset the margins/paddings on the body.

    So it will be 100&#37; height+that

    Second, you don't use proper technique. Try this (untested)
    Code:
    html, body {height: 100%;margin:0;padding:0;}
    
    div#container {min-height: 100%; margin: -140px auto 0px;}
    #header{border-top:140px solid transparent;}
    div#footer{background: #333;height: 140px; position:relative; margin: 0px auto 0;}
    
    HTML:
    
    <body>
    <div id="container">
    <div id="header">
    <p>text1</p>
    </div>
    </div>
    
    <div id="footer">
    <p>text2</p>
    </div>
    </body>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi xismo, Welcome to SitePoint!

    The code Ryan posted is the basic structure for Sticky Footers but it did not include the fixes for IE8 and Opera. They both suffer from a min-height:100&#37; bug which causes the footer to hang when the viewport is resized.

    For a complete explanation have a read through Paul's article at search-this.com.
    http://www.search-this.com/2009/10/0...ticky-subject/

    You will also find the updated method in the FAQs
    How do you put a sticky footer at the bottom of the window?

    Here are some live examples with the cross browser fixes in place.

    http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm
    http://www.css-lab.com/demos/stickfoot/stickfoot-1.html

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for your replies. Finally after two days I got. Your examples helped although I tried something similar before. The thing with my site is that it 's runnning on a custom wordpress theme and there is a lot of margins and paddings. Problem was that I had to not just subtract the height of the footer, but all of the margins included in all the elements + the height of the header. So thanks again for your help.

    Do any of you guys have some experience with WP? What would be best way to have the footer stick to the bottom of all the pages. e.g header.php, index.php, and all etc. I know I could just have each page wrapped but wondering if there's maybe a smarter solution for it.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The solution we gave is the only full proof solution to a sticky footer. You'd need the CSS we gave.

    The #header element I added isn't really needed. You just need to target the first child in the #container elemen and give that the top border
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •