Question

Simple question, but I can’t seem to find the answer.

I have a 200px vertical header (div). I want another div to go below it and take up all of the space to the bottom of the page. How do I do this?

Thanks!

EDIT: If you look at Google Calendar, this is exactly what I’m going for. I don’t know if they use JavaScript or not, but I would rather not use it if possible.

Answer 1

I’ve created a sample file showing how to make what you ask for. The key is not to specify the height, but specify the top/bottom attachments. Summarized:

# HTML
<h1>Head</h1>
<div id="rest">...</div>

And then:

# CSS
h1 {
  position:absolute;
  top:0; height:200px;
  left:0; right:0;
}
#rest {
  position:absolute;
  top:200px; bottom:0;
  left:0; right:0;
}