Using CSS to grab all available vertical space?

Question

I'd like to create a that extends from wherever it starts to the bottom of the page, but does not extend beyond the bottom of the page. It has overflow-y: auto, so that if the div content is too long, a scroll-bar will appear (for that only, not for the whole page).

I tried height:100%, but that makes the height equal the page height... so if the doesn't start at the very top of the page, it ends up being too tall.

(Example: window height is 100px; stuff at the top of the page take 20px; I want the to be 80px high. But I want it to be automatically resized to 70px if the window is resized to 90px.)

Can this be done without JS? If not, how do I use JS to do that? (Using FF 3.x, but a cross-browser solution is of course preferred.)

Answer 1

Have you tried setting the body margin's to 0?

Answer 2

OK, found the solution -- making the position absolute and setting the bottom to 0 (and top to whatever the top is).

Answer 3

Sounds like you want something along the lines of the following:

#myContainer {
  position: absolute;
  top: 20px;
  bottom: 0px;
  left: 0px; /* Should include space for a sidebar, if you have one. */
  right: 0px; /* Same as above */
}