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

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

HTML
<div class="任意のクラス名">
  <iframe src="" frameborder="0"></iframe>
</div>
CSS
.任意のクラス名 {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: お好きな高さpx;
  /**
   * うまくいかないときに追加 
   * position: relative;
   */
}

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

参考リンク:
iPhoneとiPadでiframeの高さの指定ができない
iOSでiframeの内容がはみ出して表示される場合の対処法
モバイル向けWebページでiFrameを使用する際のスクロール問題
iOS Safariでiframe要素の高さが広がってスクロールができない
iframeのレスポンシブ対応の方法。iphoneではみ出る問題も解決済み

コメントを残す