Member Avatar for cmills83

<< URL Snip -- Please post code only, thanks >>

The table extends to the bottom in IE but not in FireFox, any ideas? Thanks!

  • 5 Contributors
  • 5 Replies
  • 369 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

correctly identified the root cause: percentage heights are relative to a parent's used height, and browsers that follow the spec (Firefox) will not expand a child to “100%” if any ancestor has an automatic height. That behavior explains why older IE builds often appeared to fill the viewport while Firefox did not. 's form-wrapper tip is a real-world example — an un-sized intermediate element (form, div, etc.) breaks the percentage-height chain. originally saw the cross-browser difference for exactly this reason.

Practical checks to isolate the problem:

  • Verify a standards-mode doctype is present; quirks mode changes layout behavior.
  • Use the browser inspector to view computed heights and find the first ancestor with height:auto.
  • Temporarily add visible outlines/backgrounds to each ancestor to see which element is not stretching.
  • If a full-viewport layout is desired regardless of ancestor heights, prefer viewport units or modern layout techniques rather than percent heights.

A compact, modern pattern that avoids relying on parent percent heights:

/* robust, cross-browser approach without chaining percent heights */
body { margin:0; min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }        /* grows to fill viewport */
table.full-height { width:100%; height:100%; border:1px solid #000; }

When feasible, use semantic containers plus Flexbox or Grid for full-height layouts and reserve tables for tabular data. Also keep in mind 's point about varied screen setups: responsive designs that let content flow are generally more robust than forcing a single “screen-filling” layout for every user.

Recommended Answers

All 5 Replies

Member Avatar for Dogtree

The height attribute doesn't exist in any portable HTML specification. You're relying on an IE extension. A workable solution is CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html,body {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

table.full-height {
  height:100%;
  width:100%;
  border:1px solid black;
}
</style>
</head>
<body>
  <table class="full-height"><tbody><tr>
    <td>This is a test</td>
  </tr></tbody></table>
</body>
</html>
Member Avatar for cmills83

I'm afraid you are the man of the year. Thanks again for the help!

Member Avatar for Rumor

The height attribute doesn't exist in any portable HTML specification. You're relying on an IE extension. A workable solution is CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html,body {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}
 
table.full-height {
  height:100%;
  width:100%;
  border:1px solid black;
}
</style>
</head>
<body>
  <table class="full-height"><tbody><tr>
    <td>This is a test</td>
  </tr></tbody></table>
</body>
</html>

Hi there,

I used to work this out by a tip I found on the web, similar to this:
I used to apply a class (fullHeight) to the html tag, but this is not valid code for XHTML.
So, while all other browsers parsed my page correctly, ie did not parse it properly when I had the class attribute there.
Then I did what you posted to bypass the invalid code, but again ie parse it wrong.
Is there any case that applying properties to the html object is invalid in any way?

Member Avatar for MichaelRoof

Just add the form tag to the previous posting. The reason it is not working could be because the a parent (form) object is not being expanded to 100%. <br>

Try This:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html,body, form {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

table.full-height {
  height:100%;
  width:100%;
  border:1px solid black;
}
</style>
</head>
<body>
  <table class="full-height"><tbody><tr>
    <td>This is a test</td>
  </tr></tbody></table>
</body>
</html>
Member Avatar for MidiMagic

You are never going to have a screen-filling design for all users, for the simple reason that different computers are set up for different screen settings.

For example, my father still uses 800 X 600 because of his bad vision.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.