Home/ Questions/Q 6324715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T16:45:24+00:00

I have two html files, one contains the other with an iframe, and I

  • 0

I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.

So the first html file (which has a red background) look like:

<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
    <iframe src="Blue.html" frameborder="0" scrolling="no"  height="100%" width="100%" />
</body>
</html>

The second (which has a blue background):

<!DOCTYPE html>
<html>    
<body style="background-color: blue;" />
</html>

If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..

With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:

With HTML5 DOCTYPE

If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:

Without HTML5 DOCTYPE

I do want the HTML doctype though, so how can I fix this? Thanks for looking!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS:

    #wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }

    HTML:

    <div id="wrap">
    <iframe src="..." frameborder="0" id="iframe"></iframe>
</div>

    Live demo: http://jsfiddle.net/5G5rE/show/

    • 0