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ではみ出る問題も解決済み
この記事は役に立ちましたか?
ぜんぜん
ヤフーに戻ります