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