HTMLページ内フル画面のiframe

概要

余白なし、枠なしの縦も横も100%目いっぱいのiframeをつくりたい

2021年10月：JavaScriptを使わない書き方に変更

４年ぶりくらいに更新します。

新・デモ

フル画面
https://codepen.io/tsunet111/full/BadjVKJ
CodePen
https://codepen.io/tsunet111/pen/BadjVKJ

新・コード

<div class="container">
<iframe src="iframecontent.html"></iframe>
</div>

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height:100vh;
}

iframe {
  border:none;
  width:100%;
  height:100%;
}

以下は旧バージョンです。

デモ

フル画面
https://codepen.io/tsunet111/full/WNvzKWz
CodePen
https://codepen.io/tsunet111/pen/WNvzKWz

コード

<div class="container">
<iframe src="iframecontent.html" width="100%" height="100%"></iframe>
</div>

* {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

iframe {
  border:none;
  width:100%;
  height:100%;
}

$(window).on('load resize',function(){
    $('.container').css('width',  $(window).width());
    $('.container').css('height',  $(window).height());
});

jQueryを使用しています。