学ぶプログラミング言語を間違えると悲惨な話

footerの下に白い余白ができる場合の解決策(HTML/CSS)

footerの下に白い余白ができる場合の解決策(HTML/CSS)をお伝えします。

footerの下に白い余白ができるとは?

まずfooterの下に白い余白ができる現象が、具体的にどのようなものなのか解説します。

  • footerの下に白い余白ができる場合
  • footer内から文字がはみ出て下に余白ができる場合

footerの下に白い余白ができる場合の解決策

footerの下に白い余白ができる場合の解決策1.htmlとbodyのheightを100%にする

footerの下に白い余白ができる場合は、htmlが bodyよりも大きい可能性があるので、両方のheightを100%にすると直ることもあります。

HTML

CSS

 

footerの下に白い余白ができる場合の解決策2.body直下にwrapperをつける

HTML

CSS

 

 

footer内から文字がはみ出て下に余白ができる場合の解決策

footer内から文字がはみ出て下に余白ができる場合の解決策は「高さ(height)の指定を避ける」

これは、「footer内から文字がはみ出て下に余白ができる場合」の解決法です。

レスポンシブデザインでコンテンツの中身の要素が増減したり、textを入れる場合は、heightの指定を避けましょう。

レスポンシブで文字サイズが変化した場合や中身の要素の増減により、表示がおかしくなる可能性があります。

解決策は、height:auto;にすることです。

ついでに上下のコンテンツと被らないように、marginやpaddingを上下に設定しましょう。

HTML

CSS