覚書

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

記事内に広告が含まれている場合があります

[talks text=’

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;
   */
}

コメント欄

タイトルとURLをコピーしました