フッター要素をページ下部に常に固定で表示したい場合のCSS

CSSの書き方

ページの下部に常に表示されるフッターを作成するには、CSSのposition: fixedとbottom: 0を使用することができます。例えば、以下のようなスタイルを適用することができます。

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

別の方法として、position: stickyを使用することもできます。position: stickyは、要素がスクロールされるときに、指定された位置に固定されるように動作します。例えば、以下のようなスタイルを適用することができます。

footer {
  position: sticky;
  bottom: 0;
  width: 100%;
}

positon: fixed と position: stickyの挙動の違い

position: fixedとposition: stickyは、要素をページ上の特定の位置に固定するために使用されるCSSプロパティですが、動作が異なります。

position: fixedは、要素をビューポート（ブラウザの表示領域）に対して固定します。つまり、ページがスクロールされても、要素は常にビューポート内の指定された位置に表示されます。

一方、position: stickyは、要素がスクロールされるときに、指定された位置に固定されるように動作します。つまり、要素がスクロールされるときに、指定された位置を超えると固定されますが、それ以外の場合は通常の要素と同様に動作します。

例えば、フッターをページ下部に常に表示する場合、position: fixedを使用すると、フッターは常にページ下部に固定されます。一方、position: stickyを使用すると、フッターはページ下部に固定されますが、ページがスクロールされるときには通常の要素と同様に動作します。

以上が、position: fixedとposition: stickyの違いです。どちらを使用するかは、要素をどのように表示したいかによって決定します。