Web制作中、フッターの位置を最下部に固定するつもりが、お問い合わせ部分と重なってしまいました。
色々調べた結果、解決したので記していきます。
#フッターをウインドウ最下部に固定する
HTMLは下記の通りです。
html
<body>
<div class="wrapper">
＊
＊
#省略
＊
＊
<footer>
<p>©︎2020-2020 Goingo and Toigo.</p>
</footer>
</div>
</body>
↓CSSで位置を最下部にする。
css
body {
width: 100%;
height: 100%;
}
.wrapper{
min-height: 100vh;/*①高さの最小値*/
position: relative;/*②相対位置*/
}
footer {
width: 100%;
height: 200px;
position: absolute;/*②絶対位置*/
bottom: 0; /*下に固定*/
}
①vh…画面の大きさを基準にした単位
②.wrapperを相対位置とする。footerにposition: absolute;を書いて、位置を最下部に決めるようにする。
ここでページを更新してフッターの位置が最下部にあるか確認。
冒頭の画像のようにお問い合わせ部分と重なったままであれば、以下の方法を試してみてください。
↓
#フッターとコンテンツがネガティブマージンで重なるのを防ぐ
html
<body>
<div class="wrapper">/*フッター以外のすべての要素をdiv要素で囲む*/
＊
＊
#省略
＊
＊
<div class="push"></div>/*コンテンツ内に空の要素(.push)を加える*/
<footer>
<p>©︎2020-2020 Goingo and Toigo.</p>
</footer>
</div>
</body>
CSS
footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
margin-bottom: -200px;/*フッターの高さと等しいネガティブマージン*/
}
.push {
height: 200px;/*フッターと同じ高さに指定*/
}
参考にさせていただきました→ https://coliss.com/articles/build-websites/operation/css/css-sticky-footer.html
最下部に固定することが出来ました！