Iframe Height

Lately I wanted to make an iframe that would be the full height and width of the outside window. Width was not a problem but height was.

iframe {
     width: 100%;
     height: 100%;
}

This works for width but not for height because the iframe takes the percentage of the content it encloses, not the percentage of the window enclosing it. This can be a problem if the framed page contains a table (because tables also calculate their contents first) or dynamic content which loads after the rest of the page loads. From what I can tell, the only things to do are to give a set pixel value for height (which works) or to use JavaScript to go in and change the iframe height after the page loads (which I didn’t want to do in this case).

If anyone is wondering, I also tried

body { height: 100%; }
iframe {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
}

which also didn’t work. Putting the styles inline in the iframe element didn’t make any difference. There were also suggestions online about putting a div around the iframe, but that didn’t work for me either. I wish I had a great solution, but at least this post may save myself or someone else time in trying things that don’t work.