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

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

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

.任意のクラス名 {
  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ではみ出る問題も解決済み

この記事は役に立ちましたか？

はい（以下をポチッと）

ぜんぜん

ヤフーに戻ります