• HOME
  • web
  • 【CSSメモ】height: auto; の力でスクロールが復活した話

【CSSメモ】height: auto; の力でスクロールが復活した話

🔍 問題：スクロールできない！

スマホファーストでLPを構築していたとき、なぜかスクロールできないという現象に遭遇。
原因は、以下のような CSS にありました。

css
html, body {
height: 100%;
}

🤔 なにが問題？

height: 100% は「親要素（＝htmlの場合はviewport）の高さちょうどに合わせる」という指定。

つまり body も 100% になってしまうと、それ以上の高さのコンテンツがあっても無視される。
そのうえ overflow: hidden がどこかにあれば、スクロールも封じられてしまう。

💡 解決策：height: auto; を明示する

css
html, body {
margin: 0;
padding: 0;
height: auto;
min-height: 100%;
}

✔ ポイント

  • height: auto; にすると、中身の高さに応じて要素が伸びる。

  • min-height: 100% を併用することで、最低でも1画面分の高さは確保される。

  • 結果：スクロールが復活し、見えなかったコンテンツも表示されるようになる。

✅ まとめ

指定意味
height: 100%画面ピッタリで止まる。中身がはみ出しても無視。
height: auto中身に応じて高さが伸びる＝スクロール可能。
min-height高さの最低保証ライン（背景などの維持に有効）。

🧠 一言メモ

「スクロールできないとき、height: auto を疑え。」