Thanks for the info, I've read this quite a few times before but it doesn't work in this case.
If you take the example (without doctype) and add height:100% to body and html, IE still works as it did before (and gives the result I want), Firefox shows no change, Opera behaves like IE. If I put the browsers into standards compliance mode by adding the html 4.01 strict doctype, IE and Opera behave the same by growing the whole table (not just the 'body section') to the height of the viewport, whereas Firefox doesn't grow the table at all. Please cut and pase the following code and resize the window to see what I mean - it's really frustrating when browsers still produce different results when in 'standards compliance' mode.... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <!--The div with class bodyDiv should show scroll bars when content overflows--> <html> <head> <style> html { height:100%; } body { height:100%; overflow : hidden; } table { height : 100%; width : 100%; } .bodyDIV { height : 100%; overflow : auto; } .headerTR { height : 1%; } </style> </head> <body> <table> <tr class="headerTR"> <td>Header Content</td> </tr> <tr> <td> <div class="bodyDIV"> <p>Body content</p> <p>Body content</p> <p>Body content</p> <p>Body content</p> <p>Body content</p> <p>Body content</p> <p>Body content</p> <p>Body content</p> </div> </td> </tr> </table> </body> </html> On 8/25/05, Michael Landis <[EMAIL PROTECTED]> wrote: > On 8/24/05, andrew welch <[EMAIL PROTECTED]> wrote: > > > This works with IE in quirks mode, but not in Firefox or IE in > > standards mode. The problem is setting the table to 100% high - IE in > > quirks mode makes that the height of the viewport, whereas IE in > > standards mode and Firefox make that the height of its container. As > > we don't know the exact height of the window, the table just sizes to > > its contents and so no content overflows, hence no scrollbars. > > <example snipped/> > > Hi, Andrew, > > You might want to see about ways to make sure that "100%" is being > recognized. The issue is that a percent height only works if its > parent's height is not based upon its content (that is, as "auto"). If > the parent container doesn't have a defined height, percents turn into > "auto".[1] > > The way to get around this is by defining the heights for all parents > between window and the table. HTML, which defines the initial > containing block, can use a percentage, because its "parent" is the > window itself, whose height is not based upon its content.[2][3] So if > HTML is set to 100% high, it is now explicitly defined as being as > tall as the window. From there, you then define BODY as 100% high, and > that will stick because HTML's height is fully defined as the height > of the window. BODY will be as tall as the window, too. As you keep > going from child to child, setting heights to 100%, you can reach down > as far as you need until you hit the table and make it 100% high. If > everything between it and the window are set as 100% high, it will be > as high as the window too, which should give you your scrollbars. > > HTH, > > Michael > > [1] http://www.w3.org/TR/CSS21/visudet.html#the-height-property > [2] http://www.w3.org/TR/CSS21/visudet.html#containing-block-details > [3] http://www.w3.org/TR/CSS21/visuren.html#q2 > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
