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