SteveP SteveP - 1 year ago 68
HTML Question

fixed header div with scrollable div below

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.

<div id="content">
<div id="top-padding"></div>
<div id="stuff">
some content
End of content.
</div><!-- content -->

My attempt so far is:

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.

Answer Source

Try this:

#stuff {
   background-color: lightgreen;
   top:30px;  /* as the height of the other div is 30px */

Working Fiddle