fixed header div with scrollable div below

Question

I'm trying to place two divs one above the other. The top one has a fixed size. The bottom one needs to fill the rest of the page height, without making the page higher if it's content is too big. ```

some content

End of content.

``` My attempt so far is: http://jsfiddle.net/b4fEE/ The problem I have is that the green div is too big. I need as way to specify it's height as ``` 100% - 30px ``` I'd prefer to do this in pure css, but I will resort to javascript/jquery if necessary.

Accepted Answer

Try this:

```
#stuff {
   overflow-x:auto;
   background-color: lightgreen;
   top:30px;  /* as the height of the other div is 30px */
   left:0;
   right:0;
   bottom:0;
   position:absolute;
}
```

Working Fiddle

fixed header div with scrollable div below

Solution

Problem