Forums

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

Home Forums CSS 100% Height in 960 Grid

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #25167

    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!

    #59182
    TheDoc
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.