Grow your CSS skills. Land your dream job.

100% Expanding footer (non sticky footer)

  • # August 14, 2008 at 12:42 pm

    Hello all,

    I am having trouble with a footer expanding. I know what your thinking, just look up sticky footers. Well I don’t want sticky footers, I want the footer to expand 100% if the browser res is larger than the page. Here is and example of what its is doing: [attachment=0]site.gif[/attachment] Basically I want that grey area to expand to the bottom on larger screens.

    Any ideas? Very simple CSS for the footer

    Code:
    div.footer {
    background:#E1E7E7;
    height:100%;
    }
    /* THIS IS INSIDE THE FOOTER */
    div.footer-container {
    position:relative;
    width:826px;
    margin:0px auto 0 auto;
    }
    div.footer-container ul {
    height:200px;
    }
    /* THIS IS FLOATING ELEMENT – I DON’T THINK IT IS THE PROBLEM AS DISPLAY:NONE; DOES NOT EFFECT THE PROBLEM I”M HAVING */
    div.flash-beaker {
    position:absolute;
    margin-top:-147px;
    margin-left:718px;
    }
    # August 14, 2008 at 1:27 pm

    I just tried

    body, html {
    height: 100%;
    }

    and it worked, but now I have extra space on the scrollbar. Hummm

    # August 14, 2008 at 5:29 pm

    I tried to separate the code so you could see what I’m talking about…Also here is a new screen. notice the scrollbar on the right. This is driving me nuts.[attachment=0]site-long.gif[/attachment]

    CSS

    Code:
    html, body {
    height: 100%;
    }

    div.site-container {
    width:826px;
    margin:0 auto 0 auto;
    overflow:hidden;
    }
    div.header {
    overflow:hidden;
    }

    div.sidebar {
    width:225px;
    float:left;
    overflow: hidden;
    }
    div.news-updates-scroller {
    height:311px;
    overflow:auto;
    }
    div.right-content-well {
    float:right;
    overflow:hidden;
    }
    div.footer {
    background: #999999;
    min-height:100%;
    }
    div.footer-container {
    width:826px;
    margin:0 auto 0 auto;
    }

    HTML

    Code:

    flash-demo

    Latest Projects

    Client List