Html 自动将 iframe 大小调整为设备大小答案

【问题标题】：Html resize iframe automatically to device sizeHtml 自动将 iframe 大小调整为设备大小
【发布时间】：2020-12-27 04:44:20
【问题描述】：

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

如何自动调整 iframe 的大小以适应设备屏幕？我刚开始学习 HTML、JS 和 CSS，所以如果我没有留下足够的代码，请告诉我。我只有 11 岁。谢谢。

【问题讨论】：

标签： javascript html css iframe autoresize

【解决方案1】：

使用 height: 100vh; width: 100vw;

CodePen

更多信息可以在这里找到：Full-screen iframe with a height of 100%:)

【讨论】：

【解决方案2】：

在大多数现代浏览器中，您可以使用vw 和vh 单位，它们分别等于屏幕宽度和高度的 1%：

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

如果您针对的是旧浏览器，您可以为iframe 及其父级div 设置width: 100%; height: 100%;：

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

【讨论】：