[CSS]iOSでiframeの内容がはみ出して表示される場合の対処法

CSS

2016.06.16

iPhoneやiPod touchなどのiOS端末で、<iframe>に指定したoverflow:scrollによるスクロールが効かずに<iframe>の内容がはみ出して表示されてしまう場合の対処法のご紹介です。

iOSでiframeの中身が枠からはみ出して表示される場合

例えば以下のような<iframe>ですが、

<div class="iframe-container">
	<iframe width="300" height="150" src="sample.html"></iframe>
</div>

</div>

iOSで枠内に納めて<iframe>の中身をスクロールさせるには、親要素である<iframe-container>に高さを指定します。

.iframe-container {
	width:100%;
	height:250px;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
	}    
.iframe-container iframe   {
	width:100%;
	height:100%;
	display:block;
	border:none;
	}

.iframe-container {

width:100%;

height:250px;

overflow-y:scroll;

-webkit-overflow-scrolling:touch;

}

.iframe-container iframe {

width:100%;

height:100%;

display:block;

border:none;

}