Web制作中、フッターの位置を最下部に固定するつもりが、お問い合わせ部分と重なってしまいました。
色々調べた結果、解決したので記していきます。
フッターをウインドウ最下部に固定する
HTMLは下記の通りです。
html
<body><divclass="wrapper"> ＊ ＊#省略 ＊ ＊<footer><p>©︎2020-2020GoingoandToigo.</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><divclass="wrapper">/*フッター以外のすべての要素をdiv要素で囲む*/ ＊ ＊#省略 ＊ ＊<divclass="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
最下部に固定することが出来ました！