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

Question

Hi.

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

To have the content scroll, you need to use overflow:scroll;

Also make sure you use a doctype.

Answer 2

I'm thinking that at least one of your container elements, i.e. the table or the div should have a height value set other than in %. When is the content too much for something with height of 100%?

Answer 3

You may try 'min-height', but this does not work on IE. ;-)

In general I recommend to avoid using 100% height div's.

Have a look at the question Div 100% height works on Firefox but not in IE, which has a similar problem.

Answer 4

you could try min-height, and in IE use the !important hack

Answer 5

Not sure if I'm doing it wrong, but using percentage for height on <div> in tables seems to be completely ignored. Behaviour is consistent regardless of %. I only manage to shrink the div with height specified in pixels.

And BTW, doctype specifies boxmodel, which could affect how this scenario is handle (however I don't think it does). (Read more: http://www.quirksmode.org/css/quirksmode.html)

Answer 6

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.

Answer 7

I was able to make this work with nested tables, for a current project. The Google Earth plugin was in a div that needed to fill the entire screen and resize accordingly. I gave both nested tables and all involved table cells an ID and set all of their heights on resize:

$(function() {
    $(window).resize(function() {
        $('#main_table').height($(window).height() - $('#main_table').offset().top);
        $('#main_td').height($(window).height() - $('#main_td').offset().top);
        $('#main_table2').height($(window).height() - $('#main_table2').offset().top);
        $('#main_td2').height($(window).height() - $('#main_td2').offset().top);
        $('#map_canvas').height($(window).height() - $('#map_canvas').offset().top);
    });
    $(window).resize();
});

Works more than good enough for my project in IE8 and Chrome.