スマホカテゴリーページにてiframeでgoldのページを100%表示させる方法

Question

スマホカテゴリーページにてiframeでgoldのページを表示させく、以下のソースを入れています。


しかし、height="100%"だとページの上部しか表示されずheight="xxxpx"とピクセルを指定するとデバイスにより余白ができてしまいます。
iframeの高さを100%表示する方法がわかったら教えてください。

Accepted Answer

ECマスターズの伊藤です。

> iframeの高さを100%表示する方法がわかったら教えてください。

高さ100%というのは、
画面の高さと同等ということでよろしいでしょうか。

その場合は
style="height:100vh"
をiframeに追加してください。




もし、内容の高さを100%とするということであれば
iframeの内容に合わせて、高さを取得する方法がございませんので
縦持ち、横持ちに合わせて、高さの設定をCSSにて
変更して頂くようになります。

iframeに、class="iframe_height"を追加し、
上記classのついた要素の高さを
デバイス幅500px以上、未満で
変更するCSSとなります。





.iframe_height{
height="横持ちの高さpx"
}
@media only screen and (max-width : 500px) {
  .iframe_height{
    height="縦持ちの高さpx"
  }
}