Html 自動調整 iframe 到設備大小

Question

<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 歲。謝謝。

Answer 1

在大多數現代瀏覽器中，您可以使用分別等於屏幕寬度和高度的 1% 的vw和vh單位：

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

如果你的目標是舊瀏覽器，你可以設置width: 100%; height: 100%; width: 100%; height: 100%; 對於iframe及其父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>

Answer 2

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

代碼筆

可以在此處找到更多信息： 高度為 100% 的全屏 iframe :)