1
<div  style="position:absolute; top:50px; left:0px">
        <iframe style="border: none;" src="./RedMan2.html" width="1350" height="900"></iframe>
    </div>

How do you automatically resize an iframe to fit the device screen? I just started learning HTML and JS and CSS, so if I did not leave enough code just tell me. I'm only 11. Thanks.

2 Answers2

1

In most modern browsers you can use vw and vh units which are equal to 1% of screen width and height respectively:

<div  style="position:absolute; top:50px; left:0px">
  <iframe style="border: none; width: 100vw; height: 100vh;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>

If you are targeting old browsers, you can set width: 100%; height: 100%; for the iframe and its parent div:

<div  style="position:absolute; top:50px; left:0px; width: 100%; height: 100%;">
  <iframe style="border: none; width: 100%; height: 100%;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>
Anton
  • 440
  • 3
  • 10
0

Using height: 100vh; width: 100vw;

CodePen

More info can be found here: Full-screen iframe with a height of 100% :)

Lundstromski
  • 1,197
  • 2
  • 8
  • 17