Question

I’m having a problem with iframe height when placed within a table cell. Firefox and Chrome set its minimum height at 150px while Internet Explorer handles lower height. When cell’s height is more than 150px, iframe follows nicely.

The interesting thing is that when placed within a div its height is correct regardless of div‘s height being less than 150px but within a table cell height seems to follow its own rules (set by the browser).

Here’s a JSFiddle

Example iframe test are as followed:

1. iframe in a div with height of less than 150px
2. iframe in a table cell with height less than 150px
3. iframe in a div with height more than 150px
4. iframe in a table cell with height of more than 150px

Additional limitation

Since it seems that iframe works fine when placed within a div that could be a nice solution, but I can’t control HTML since it’s part of third party controls that render iframe within a table cell. Javascript manipulation is of course always an option, but I would like to resolve this by using CSS only. And since container’s height is controlled by the third party as well, I can’t change iframe‘s height to fixed height.

Answer 1

You could try to set the table and its children to display: block.

http://jsfiddle.net/willemvb/aM2Fx/

table,
tbody,
tr,
td{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;   
}

Or you could use relative positioning on the table, and absolute on the iframe.

http://jsfiddle.net/eeZHZ/

table
{
    width: 100%;
    height: 100%;
    position: relative;
}


table iframe {
    position: absolute;
    top: 0;
}