在正方形空间中调整 iframe 的大小以适应任何屏幕尺寸

如何解决在正方形空间中调整 iframe 的大小以适应任何屏幕尺寸

我有我想要显示的自定义代码（见下文），它是我只想查看我的 p5.js 草图的网站登录页面，所以我将它嵌入为 iframe。 现在唯一的问题是让 iframe 调整到屏幕的高度，这样我的草图就可以在不同的屏幕尺寸上完全可见而无需滚动。请帮我解决这个问题！

我在Page-->Settings-->Advanced-->Header-->>>>

中输入以下代码

<style> 
  #site-title {display:none!important;}
  #page.container {display:none!important;}
  #siteWrapper.clearfix.site-wrapper {display:none!important;}
  
  
</style>


<script>
         setTimeout(function(){
            window.location.href = 'https://goodwellandbetter.com/introduction-and-curatorial-statement';
         },300000);
</script>
        
      <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6063a8fceb34c530581d6d9b">
<div class="row sqs-row">
<div class="col sqs-col-12 span-12">
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1617144028502_3267">
<div class="sqs-block-content"> 
<iframe frameborder="0" name="Outside the Form" width="100%" height="1080px" src="https://editor.p5js.org/mariamadam/present/SNlipKxEa" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>

解决方法

试着做this

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>