SteveP SteveP - 7 months ago 21
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
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
End of content.
</div>
</div><!-- 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.

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

Comments