Member Avatar for Dat0

I have a table inside a div with height=100%(viewport). The also table has height=100%(viewport). However, I want one row to have a fixed height while other adjusts to the content.

<div style="height:100%;">
<table style="height:100%">
<tr style="height:10px;"><td>Header</td></tr>
<tr style="height:100%;"><td>Header</td></tr>
</table>
</div>

The problem is that the second tr also takes viewport (100%) size. Thus I have a table that has a height of is 10px + viewport size. This is not what I want. Internet explorer seems to screw this up for some unknown reason. How do I make so that this work in internet explorer.

  • 4 Contributors
  • 3 Replies
  • 117 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

What happens in the snippet posted by is not an IE-only bug: a percent height on a table row resolves against the table's height, so tr { height:100% } will try to make that row the full height of the table — not "the remaining space". The CSS spec and browser docs explain how percentage heights are resolved when ancestors have explicit heights (CSS2.1 spec, MDN summary). That semantic is the root cause of the 10px + viewport result you saw.

Three practical ways to get the layout you actually want (fixed header, body that fills remaining viewport and scrolls if needed):

  1. Modern (cleanest): use flexbox so the header keeps a fixed height and the content area grows to fill the rest:

    html, body { height:100%; margin:0; }
.wrap { display:flex; flex-direction:column; height:100%; }
.hdr  { flex:0 0 40px; }   /* fixed header */
.body { flex:1 1 auto; overflow:auto; } /* fills remaining space */

  2. Broad/old-browser fallback: absolute positioning. Make the container position:relative; height:100%, position the header at the top with a fixed height, and position the content from top:headerHeight to bottom:0 with overflow:auto.

  3. If you must use real <table> markup for tabular data: split header and body into two elements (header table + body table inside a scrollable wrapper) or compute the body wrapper height with a small JS routine on load/resize and set it to viewportHeight - headerHeight. That preserves semantics while keeping the body area bounded.

Troubleshooting tips: ensure a standards DOCTYPE and that html, body (and any ancestor) have explicit heights when you rely on percentage heights; avoid setting tr { height:100% } when you mean "fill remaining space"; and be aware that keeping header/body in separate elements can require column-width coordination if you need columns aligned. , and flagged related pitfalls — the fixes above avoid those traps and work predictably across browsers.

Recommended Answers

All 3 Replies

Member Avatar for carmen007

I have a table inside a div with height=100%(viewport). The also table has height=100%(viewport). However, I want one row to have a fixed height while other adjusts to the content.

<div style="height:100%;">
<table style="height:100%">
<tr style="height:10px;"><td>Header</td></tr>
<tr style="height:100%;"><td>Header</td></tr>
</table>
</div>

The problem is that the second tr also takes viewport (100%) size. Thus I have a table that has a height of is 10px + viewport size. This is not what I want. Internet explorer seems to screw this up for some unknown reason. How do I make so that this work in internet explorer.

you are using div and table 100% may be you should use min-height if it is allowed...........

Member Avatar for Troy III

I have a table inside a div with height=100%(viewport). The also table has height=100%(viewport). However, I want one row to have a fixed height while other adjusts to the content.

<div style="height:100%;">
<table style="height:100%">
<tr style="height:10px;"><td>Header</td></tr>
<tr style="height:100%;"><td>Header</td></tr>
</table>
</div>

The problem is that the second tr also takes viewport (100%) size. Thus I have a table that has a height of is 10px + viewport size. This is not what I want. Internet explorer seems to screw this up for some unknown reason. How do I make so that this work in internet explorer.

No -Explorer is acting as expected and as it normally should.
It doesn't have the "bleeding content" bug you are rellying on to get your layout idea into practice here.
The content should never bleed out of the table cell which is a container and containers should always be able to contain things. Thats their sole pupose.

You are using tables - than use table conventional methods to manage you content, don't use hacks. It's a bad coding practice.
Read about rowspan and collspan starting here, or get yourself a WYSIWYG - table editor for a fast solution.

p.s.: and you shouldn't use no pupose divs to wrap tables - tables are themselves block elements, you've also stated div 100% table 100% but 100% of what?!

Member Avatar for MidiMagic

Different browsers use different standards when height: 100%; appears in a box object that is not contained in another box object. Some browsers use the height of the viewport, others use the size of the document.

My advice is to never use a percentage height unless the object is contained in something else that has a definite height. It is unpredictable.

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.