#1
  1. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144

    Sticky footer with 100% content height


    Hi--

    Trying to build a responsive site with a header, two-column content area, and a sticky footer.

    I can do all of this, but the hangup I'm running into is making the two columns in the content 100% height if it's less than the screen size.

    so basically this is what I've got:

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>

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

    #page {max-width: 1000px; margin: auto; background-color: #ccc; overflow: auto;}

    header {width: 100%; height: 150px; background-color: #f00;}
    footer {width: 100%; height: 150px; background-color: #0f0;}

    #left {width: 200px; float: left;}
    #content {max-width: 750px; float: left; border-left: 1px dotted #000;}
    </style>

    </head>
    <body>

    <div id="page">
    <header>header here</header>

    <div id="left">subnav</div>

    <div id="content">
    <p>blah</p>
    </div>

    </div>

    <footer>footer here</footer>

    </body>
    </html>
    This works great if the content extends past the bottom of the screen, but if not, the footer floats right below the content.

    If I add 100% height to the #page element, it pushes the footer below the screen. I can, of course, play with negative margins and such, but nothing I've tried works. Also, I need the #content element 100% high so the dotted line extends the whole way and the footer needs to be all the way across the screen, not just the content.

    I'm dying here so any help is appreciated.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    357
    Rep Power
    132
    Hi there Frank Grimes,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>untitled document</title>
    
    <style media="screen">
    html,body {
        height:100%;
        margin:0;
        padding:0;
     }
    #container {
        position:relative;
        min-height:100%;
     }
    #page {
        max-width:1000px;
        border:1px solid #000;
        margin:auto;
        background-color:#ccc; 
        overflow:hidden;
     }
    header {
        height:140px;
        padding:5px;
        background-color:#f00;
     }
    #subnav {
        float:left;
        width:190px;
        padding:5px;
        border-right:1px dotted #000;/* required for #subnav being higher than the #content */
     }
    #content {
        padding:5px;
        border-left:1px dotted #000;
        margin-left:200px;
     }
    #content p {
        margin:0;
        padding-bottom:10px;
     }
    #footer-spacer{
        height:150px;
     }
    footer {
        position:absolute;
        bottom:0;
        width:100%; 
        height:140px;
    	padding:5px 0;
        background-color:#0f0;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="page">
    
    <header>header here</header><!-- end #header -->
    
    <div id="subnav">subnav</div><!-- end #page -->
    
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div><!-- end #content -->
    
    </div><!-- end #page -->
    
    <div id="footer-spacer"></div>
    
    <footer>footer here</footer><!-- end #footer -->
    
    </div><!-- end #container -->
    
    </body>
    </html> 

    coothead
    ~ the original bald headed old fart ~
  4. #3
  5. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Thanks, coothead, but it's not working. I need the content to fill the screen vertically. Adding height: 100% to either #page or #content doesn't work here.

    More and more I'm think Javascript is the solution here.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    357
    Rep Power
    132
    Hi there Frank Grimes,

    sorry, but I misread your requirements a little bit.

    Check out the attachment, it may be nearer to your needs.

    cooteahead

    Comments on this post

    • Frank Grimes agrees : Thanks a lot for your help!
    Attached Files
    ~ the original bald headed old fart ~
  8. #5
  9. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Ah, very close. Thank you! I just need the footer across the width of the screen, not just the content.

    Seriously, why is this so hard?


    EDIT--

    Thinking a little more about this, I bet your code will work fine for me. I could probably get away with using an image on the <body> and position it at the bottom. The content in my footer needs to be centered with the content, but the green footer bar needs to be full screen width. I need to try this when I have more time.

    Again, thank you!
    Last edited by Frank Grimes; January 23rd, 2015 at 05:00 PM.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  10. #6
  11. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    I wrestled with this for a long time and coothead helped me a lot, but eventually wasn't able to get this working. Then I found a site with exactly what I needed: New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer

    Amazing. I was able to adapt this to my needs.

    Really looking forward to better support for flexbox!
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence

IMN logo majestic logo threadwatch logo seochat tools logo