現在ホームページリニューアルに伴い、閲覧しづらい状態になっております。何卒ご了承ください。

footer(フッター)を最下部に固定したい場合のコード

ウェブサイトを制作中に、footerが浮き上がってしまう・・・

こちらでは、そんなお悩みを解決するコンテンツ量に関係なくフッターを常に最下部に固定する記述についてご紹介します。

目次

footerを最下部に固定したい場合の記述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="wrapper">
      <main>
        <!-- コンテンツの記述 -->
      </main>
      <footer>
        <!-- フッターの記述 -->
      </footer>
    </div>
  </body>
</html>
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
よかったらシェアしてね!
目次
閉じる