iframeで絶対配置を使って高さ・幅を設定できない理由と解決策

iframeが絶対配置でうまく伸縮しない理由

iframeは「置換要素（replaced element）」に分類される特殊な要素であり、通常の要素とは扱いが異なります。一方で、<div>要素は「非置換要素（non-replaced element）」です。

この違いが重要になります。非置換要素である<div>に対してposition: absoluteを指定し、top / left / right / bottom の4方向すべてを設定すると、要素は親要素の領域いっぱいに自動的に引き伸ばされます。しかし、iframeのような置換要素は内在的なサイズを持つため、left / right や top / bottom を同時に指定しても、期待どおりに伸縮しないのです。

解決策：divをラッパーとして使う

同じ結果を得たい場合、つまりiframeに対して left / right または top / bottom を同時に設定したい場合は、絶対配置（absolute position）と top、left、right、bottom を指定した<div>をラッパー（外側のコンテナ）として使用します。

構造のイメージは以下のとおりです。

<div style="position:absolute; top:0; left:0; right:0; bottom:0;">
  <iframe src="..."></iframe>
</div>

そして、iframe自体には次のようにサイズを指定します。

width: 100%;
height: 100%;

こうすることで、ラッパーとなる<div>が親要素の領域全体に広がり、その中でiframeが100%のサイズで表示されます。結果として、div単体で絶対配置した場合と同じレイアウト効果を、iframeでも実現できるのです。

ポイントまとめ

• iframeは置換要素のため、4方向の絶対配置指定だけでは自動的に伸びない
• 絶対配置した<div>をラッパーとして使うことで問題を回避できる
• iframeには width:100% と height:100% を指定してラッパーに合わせる