はじめに
なんでフッターがコンテンツに被ってるねん！！！
フッターをposition:fixedで固定したからか？
でも下で固定しとかな、コンテンツが少ない時フッターが上にあがってきてしまう。。。
・コンテンツ量が多い時、スクロールしたら下にフッターがある
・コンテンツ量が少ない時、常に下にフッターがある
👆を同時に実現するにはどうしたらいいか・・・
Webのcssを触るのが久々で、結構な時間こんな問題と格闘してしまった。。
cssだけで解決してみせます
<body>
<div class="wrapper">
<header>
<!--グローバルナビなど-->
</header>
<main>
<!--ここにコンテンツの内容-->
</main>
<footer>
<p>Copyright © 2021</p>
</footer>
</div>
</body>
.wrapper{
min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
position: relative;/* ←相対位置 */
padding-bottom: 60px; /* ←フッターの高さを指定 */
/* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}
footer{
position: absolute;/* ←絶対位置 */
bottom: 0;
text-align: center;
}
か、解決した。。。！！
コメントより
別のやり方も教えてもらいました！①
headerとfooterのheightが分かっているならmainのmin-heightをcalc(100vh - var(--header-height) - var(--footer-height))と言う感じに設定してあげればfooterのpositionをabsoluteにする必要はなくなりますよ。
mainの中に下方向マージンが大きく取られたものが入るとfooterが押しやられるので、mainに適当な幅で下方向paddingを入れてやると崩れにくくなります。
@felis さん、ありがとうございます！
別のやり方も教えてもらいました！②
wrapperをフレックスブロックのmin-height: 100vh; flex-direction: columnで縦積みにし、mainをflex: 1 1 auto;にするとmainがフレックスアイテムになって良い具合に伸びます。
というやり方もできます
@right714 さん、ありがとうございます！