Home/ Questions/Q 8685879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:41:24+00:00

I’m writing some code to generate a full screen page with a header. I’m

  • 0

I’m writing some code to generate a “full screen” page with a header. I’m using a table to do layout, with CSS specifying the dimensions and formatting.

The table has a height and width of 100% to cause it to fill the window/viewport, which at first works as intended. The table has two rows with one cell each. The first row’s cell has a height of 20px, while the other row’s cell has a height of 100% to allow it to fill the remaining space of the window. Inside the bottom cell is an iFrame, set to 100%x100% to fill the cell. The iFrame works as intended, however the table is not following its settings.

When the page is rendered in IE, which is specifically my target browser, the table is being stretched outside the range of the viewport. Specifically, the table is adding 20px to its dimensions. Even when I set the table to a fixed height, it’s still adding 20px to the dimensions I’m setting. I’d expect the code to force the table to 100% height, have a top cell of 20px, and the bottom cell specifically take up the remaining available space of the table’s height, without stretching the table. This works perfectly in Chrome, but IE keeps making the table’s height 100%+20px, even with a CSS rule setting it to strictly 100% height.

Below is a simplified version of my code:

    <table style=" height:100%; width: 100%;"><tr><td style="height: 20px;">
    {content header here}
    </td></tr><tr><td style="height: 100%;">
    {iframe with dimensions 100% x 100% here}
    </td></tr></table>

The result in Chrome displays perfectly. In IE, the containing table ends up 20px too tall and runs outside the viewport, causing the bottom 20px of the iframe to be outside the viewport.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s normal. One of the table rows is with height “20px” and the other is with height “100%”.

    Instead of “height:100%” use “height:auto”.

    This will force the browser to calculate what is the left page height space from the parent element if the first row is with height 20px:

    Also, “height:auto” could save you potential problems if your table has border and your elements has some padding or margins set.

    • 0