フッターの下に余白ができてしまいます。

Question

フッターの下に何故か余白ができてしまいます。
試したこととしましては、bodyとhtmlにheightを100%指定したりしました。
しかし改善できませんでした。
何かわかる方いましたら、ご教授願います。

Comments

[退会済みユーザー]

body要素の一番下にちゃんとついてますよ

Answer 1

勘で書いてみます。
画面幅を大きくしたときに、フッターの下に余白が生じてまう、という問題点だと認識しました。
(フッターの上部にコンテンツがたくさんある場合や、画面幅が小さいときは、フッターの下に余白は生じないと思います。)

↓これでやりたいことは実現できますか?

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

Comments

[19941224ngng]

こちらのcssをてきようしたところうまく行きました！
大変ありがとうございます！

Answer 2

動作確認を行ったブラウザがなにかわかりませんが、おそらくブラウザの標準スタイルが適用されているのだと思います。
reset.cssを導入するか、簡易的に下記のスタイルを使用してみてください

* {
    margin: 0;
    padding: 0;
}

Comments

[19941224ngng]

なるほどです。
こちらのcssはbodyに適用したら良いのでしょうか？

Answer 3

おそらく、ブラウザの標準スタイルが勝手に適用されているので、リセットしてみてください。
ress.cssを取り入れてみてはどうでしょうか。

 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

これをhtmlのhead部分に、自分で作成したCSSのlink_toの前に書いてみるといいと思います。

リセットCSSについて

Comments

[19941224ngng]

ありがとうございます。
reset.cssを使ったのですがうまくいかなかったです????