basic css problem

[rjbearcan]

Hello everyone, I have a basic css problem: I have a column that isn't stretching vertically. After looking around, and around, I began to wonder if this was the most asked question about css ever.

I want to have the column that has my navigation buttons in it stretch all the way down. There is no footer to interfere with.

What I have is:
html, body {
height: 100%;
}

#navcol {
background-color:#333333;
top:142px;
left:0px;
position:absolute;
min-height: 100%;
height: 100%;
width:197px;
}

I've tried switching the position to relative if that would make any difference, and of course it doesn't. There is no container that the #navcol sits in. If anyone could help me out, I would appreciate it.

[kas187]

By default div's have an height to fit the content. You can set height in pixels to set the height but i would advice against doing that. What you're after is faux-columns. This is a technique to simulate a div, in your case the navigation, to stretch all the way down to the footer.
A list apart has a good article on this technique and im sure you will get more results by googling it.

[vol7ron]

The container would be the body. -- wouldn't it?

[DrDoc]

By "stretch all the way down", do you mean "below the fold" as well?

100% is 100% of the parent or the current viewport, whichever comes first.
Then again, absolute positioning pulls it out of the normal flow anyway.

Based on your code, the navigation div should begin 142 pixels from the top, and end 142 pixels below the fold, regardless of any other circumstances.

[rjbearcan]

I do mean below the fold. It starts from 142px from the top and would like it to stretch the rest of the way down. I did look at that list apart article and will see how that turns out.