CSS How to make a DIV that starts 100px from the top reach the bottom of the page


I've read through several pages of questions, but I haven't been able to solve my problem. I'm pretty sure this is an extremely simple question, and I am really sorry if I waste anyone's time, but I just can't figure this out. I'm not going to post my actual code, because I think a general answer will be faster. My page is simple, nothing fancy at all, it's setup like this:

CSS example

The entire page is wrapped in a container. The problem I'm having, is i can't make the left column reach the bottom of the page. I've tried height:100%; but it creates a scroll bar because the top bar is 228px in height. I've tried giving the left column a height:100%; and margin-bottom:-228px; but that didn't work either. I've seen this on websites before, and I'm guessing I'm going to get flak because I SHOULD know this, but can I blame it on the cold that I have? Anyway, thanks for any help that I get!


Answers:


html, body {
   display: block;
   height: 100%;
   width: 100%;
}

#left-column, #right-column { 
   height: 100%;
}

Setting the <html> and <body> element (as a group selector) to a display: block then stretch it out by 100%, the child elements can inherit what is known as a 100% height, otherwise, the browser doesn't know what to reference.

You could also make your columns absolutely positioned, then add a top:100px; bottom:0 (untested)