CSS: Is it possible to get a div that is 100% height, less a top and bottom margin?

Try absolute positioning:

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
}

It can be quirky in IE6 (what isn't?), but there are a lot of tricks to try if you google around. Some include adding a clear: both rule or wrapping your absolute-positioned div inside another div.

An overflow: auto should make the scrollbar behave as you have it pictured.

edit: Alternately, you could add 20px padding to a wrapper div, then set your container to height: 100% with no margin, and it should fill up to the padding of its wrapper.

Tags:

Html

Css