Safariでiframeの高さと縦スクロールが効かない時の対処法【CSS】

2020年2月10日公開・2022年1月15日更新

この記事は最終更新から2年以上経過しています。内容が古くなっているかもしれません。。

iPhone Safariでiframeの高さと縦スクロール指定が効いていないときにさくっと使えるCSS設定メモ。

HTML

<div class="任意のクラス名">
  <iframe src=""></iframe>
</div>

CSS

.任意のクラス名 {
  overflow-y: auto;
  width: 100%;
  height: お好きな高さpx;
  /**
   * うまくいかないときに追加 
   * position: relative;
   */
}

.任意のクラス名 iframe {
  width: 100%;
  height: 100%;
  display: block; /* 二重スクロールバー回避対策 */
  /**
   * うまくいかないときに追加
   * position:absolute;
   * top: 0;
   * left: 0;
   */
}

参考リンク