Flexboxを使用してフッターを画面の一番下に配置する方法

2024-02-08 02:43 Flexbox CSS フッター
  1. HTMLの構造を設定する: まず、HTMLの構造を適切に設定します。一般的な構造は次のとおりです。
<body>
  <div class="container">
    <header>ヘッダーのコンテンツ</header>
    <main>メインのコンテンツ</main>
    <footer>フッターのコンテンツ</footer>
  </div>
</body>
  1. CSSでFlexboxを使用する: Flexboxを使用して、フッターを画面の一番下に配置します。以下に示すCSSコードを使用します。
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.container {
  flex: 1;
}
footer {
  margin-top: auto;
}

上記のCSSコードでは、display: flexを使用して、body要素をフレックスコンテナにします。flex-direction: columnを使用して、コンテンツを縦方向に配置します。

min-height: 100vhは、コンテナの高さをビューポートの高さと同じに設定します。

.containerクラスにflex: 1を指定することで、コンテナが残りのスペースをフィルするようにします。

footer要素にmargin-top: autoを指定することで、フッターをコンテナの一番下に配置します。

以上の手順を実行すると、フッターが常に画面の一番下に表示されるようになります。