Make a table with height=100% to properly contain a div with height=100%

Question

I have a table with a height of 100% and a fixed position. Within it I want to have a div with height of 100% that gives scrolling on overflow.

The trouble is the table starts behaving strangely if I put more content in the div than its height can take.

The scroll do not appear as it is supposed to, and instead the table gets larger than the screen can take.

Please just take my word for it that I do need the div to be in a table; it's for layout purposes that I have not bothered blotting my problem description with.

But that is my only restriction: the outermost element needs to be a table, and somewhere within it I want the div. If you have a suggestion where you embed the div in other elements, then please tell me!

But I want your suggestion to have the desired result in at least firefox.

And to clarify one more time: the result I want is that if the div contains too much content for its height, then the scrolls should appear while the outer table stays put.

I give you the code here so you can test it.

<table style='position: fixed; left: 0px; top: 0px; height: 100%;'>
  <tr><td style='height: 100%;'>
    <div style='height: 100%; overflow: auto;'>
      FRODO!
      <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/><br/><br/><br/><br/><br/>
    </div>
  </td></tr>
</table>

Thanks guys!

EDIT: Response to your answers.

Valamo: overflow=auto on a div means that scrolls are not visible until they are needed, so they should work. But just to be sure I had already tried overflow=scroll, along with many other things. I fail to see how setting doctype will change the situation.

Ettiene: Set a div to height=100% and then put another div within it and set its height=100% and overflow=auto, then I have no problems with the inner div; when its content is too much it will show scrolls while the outer div stays put. But if you replace the outer div with a table then you gonna have problems. So merely setting element heights to 100% is not the issue.

Any more ideas? :-)

Answer 1

Added some css to your original example:

<table style='position: fixed; left: 0px; top: 0px; height: 100%; display: block; overflow: auto; position: fixed;'>
  <tr><td style='height: 100%; padding: 0 1.5em;'>
    <div style='height: 100%; overflow: auto;'>
      FRODO!
      <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/><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/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
    </div>
  </td></tr>
</table>

The overflow: auto and the display: block on the table are there for Firefox et al. The overflow: auto on the div is there for IE.