フリーランスが会社員収入を継続して得られないパターン7つ

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

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

1.問題

・footerの下に白い余白ができる
・div内から文字がはみ出る

2.解決策

1.高さ(height)の指定を避ける

コンテンツの中身が要素が増減したりtextを入れる場合は、heightの指定を避けましょう。
文字サイズが変化した場合や中身の要素の増減により、表示がおかしくなる可能性があります。
height:auto;にして上下のコンテンツ同士が被らないように、marginやpaddingを上下に設定しましょう。

2.htmlとbodyのheightを100%にする

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

HTML

CSS

 

3.body直下にwrapperをつける

HTML

<body>
  <div id=””wrapper>
  コンテンツ
  <footer>
</footer>
  </div>
</body>

CSS

body, #wrapoer{
   display:flex;
   flex- direction: column;
   min-height: 100vh;
}
footer{
  margin-top:auto;
}