More than 3 years have passed since last update.

フッターの位置を最下部に固定したいのに、重なってしまう時の対処法

Posted at 2020-04-27

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

最下部に固定することが出来ました！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up