Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › 100% Expanding footer (non sticky footer)

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 14, 2008 at 12:42 pm #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;
    }
    August 14, 2008 at 1:27 pm #49211
    jcprovideo
    Member

    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 #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:

    blah

    Blah Blah

    blah

    Blah Blah

    blah

    Blah Blah

    News & Updates

    flash-demo

    Latest Projects

    Client List

    http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”179″ height=”292″>

    © All rights reserved.


    August 15, 2008 at 2:39 pm #49223
    jcprovideo
    Member

    Hey daGUY,

    Thanks for the reply. I was afraid I was going to have to revert to JS. The solution I am currently using works, but for some reason makes the scrollbar acts a bit strange. It fills in the blank space, but ends up adding extra space at the bottom for some reason. Check out the second screen for details.

    I wish I could use your second option, but I have two backgrounds across the page. Maybe I could rework the top HTML to give me the effect your talking about. You gave me a new idea so I’ll see what I can do…

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.