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の違いです。どちらを使用するかは、要素をどのように表示したいかによって決定します。