HTML
iframeの高さが合わない
iframe の高さが固定されている
こんな症状
iframeの中身に合わせて高さを変えたいのに、スクロールバーが出てしまう。高さ指定の問題だよ。
まず試す
iframe に十分な height を直接指定する（例 height:500px）。
html
<iframe src="content.html" style="width:100%;height:500px;border:none;"></iframe>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓スクロールバーが出て中身が見切れる
→ iframe に十分な height を指定する。 - ✓中身に合わせて自動で伸ばしたい
→ 同一オリジンなら JS で中身の高さを取得して iframe の height に設定する。 - ✓比率で指定したい
→ aspect-ratio で比率指定もできる。
なぜ起きる？
iframeはデフォルトで固定の高さ（150px）を持つよ。中のコンテンツが大きくてもiframe自体は自動で伸びないんだ。CSSでheight:100%にしても親要素の高さが決まっていないと効かないよ。
✕ エラーが起きるコード
<iframe src="content.html"></iframe>
<!-- デフォルト 150px で中身が見切れる -->✓ 直したコード
<iframe src="content.html" style="width:100%;height:500px;border:none;"></iframe>
<!-- 高さを明示的に指定 -->✅ 直ったか確認
iframe 内のコンテンツが見切れず、不要なスクロールバーが出なければOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- iframeが表示されない — 埋め込み先がiframeを拒否している
- 音声が自動再生されない — autoplay がブラウザにブロックされている
- iframe の sandbox で JS が動かない — iframeのsandbox属性でJSが動かない
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説