Skip to main content

Forums

This topic contains 4 replies, has 0 voices, and was last updated by  jcprovideo 10 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #23087

    jcprovideo
    Member

    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;
    }
    #49211

    jcprovideo
    Member

    I just tried

    body, html {
    height: 100%;
    }

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

    #49216

    jcprovideo
    Member

    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