CODEWITHSUNDEEP
javascripthtmlcssiframeautoresize
user14182627
user14182627

Reputation:

Html resize iframe automatically to device size

<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.

Upvotes: 1

Views: 1512

Answers (2)

Anton
Anton

Reputation: 472

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>

Upvotes: 2

Lundstromski
Lundstromski

Reputation: 1247

Using height: 100vh; width: 100vw;

CodePen

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

Upvotes: 1

Related Questions