iOSのifameはコンテンツ分の大きさのheight/widthになる一方で、ChromeやFirefoxではiframeのheightが固定の高さになってしまう。
そこで、iframeをflexboxにいれて、heightを伸ばしてあげる。そうするとその下のエレメントもいい感じになる。
具体的にはこんなかんじ。
html
<body>
<header>Header</header>
<section>
<div class="content">
<iframe src="..."></iframe>
</div>
</section>
<footer>Footer</footer>
</body>
css
body {
min-height: 100%; // Chrome/Firefoxでiframeを全画面にするためには大事。
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
iframe {
flex-grow: 1;
display: block;
width: 100%;
border: 0;
}
よくみたらまだ試行錯誤のあとが残っている気がする。また見直そう。
試行錯誤の手順
そのうちかく
