Grow your CSS skills. Land your dream job.

100% Height in 960 Grid

  • # June 16, 2009 at 6:44 am

    I’m trying to get a div to stretch from the top all the way to the bottom of the page. I’m using the 960 grid system.

    I searched around and I learned that to get a div strech vertically, the body (or at least its parent div) must be set to 100% height. I did this, but no effect.

    What I want do is to get the 100Column div to stretch to the bottom of the page regardless of content. The content div will always be longer in terms of characters, but I want the 100Column to always stretch to the bottom.

    Markup:

    Code:

    In addition to 960.css, Style:

    Code:
    body {
    height:100%;
    background:#111;
    color:#fff;
    font:16px/1.2 tahoma;
    text-align:center;
    vertical-align:top;
    }

    #content {text-align:left;}

    #100Column {
    height:100%;
    background:#eee;
    }

    #footer {
    background:#777;
    }

    Thanks in advance.

    Edit: If you visit 24ways.org, you can see how the years are laid out in columns, stretching all the way to the bottom. That’s the effect I want!

    # June 17, 2009 at 9:54 pm

    Your sidebar is contained in "<div id="container" class="container_12">" and will only stretch as far as both of those allow it to.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".