Question

I have a containing div that is constrained in its height and width. It has 2 child elements.

The first child can be of variable height (as the text within it can wrap, and this is desired behavior).

The second child is a div wrapping a table. The div is set to overflow-y: scroll, so it is meant to fill the remaining height of its container, and provide scrolling for the rest of its inner table when it doesn’t completely fit.

Here’s a simple view of the structure:

<div id="container" style="height:300px; width:200px">
  <div id="headerArea">
    ...
  </div>

  <div id="scrollingTable" style="overflow-y:scroll">
    <table>
      ...
    </table>
  </div>
</div>

Despite my tinkering, I can never get the second child, the scrollingTable div, to constrain itself to the limits provided by the container. Using height:100% doesn’t FILL the remaining container height, but sets the height to the container’s exact height (300px), which is too much because the headerArea takes up space too.

If the height of the headerArea was fixed, I could specify the scrollingTable’s size as 300 – heightOfHeaderArea, but as mentioned above the headerArea’s height is NOT fixed.

I’m likely going to have to use JQuery to resize the scrollingTable to the specified height, but I am curious if there is a pure css solution.

Any suggestions, or is this impossible without fixing the headerArea’s height?

Answer 1

You can’t do this with css alone. You have to give the scrolling div a height for it to be able to scroll (100% or fixed value).

http://jsfiddle.net/tUrTu/

This can be achieved though with javascript :

http://jsfiddle.net/tUrTu/2/

Hope it helps.