コンテンツの高さに関係なく、フッターをページの下部に固定するにはどうすればよいですか?

フッターをページの下部に固定する

フッターを Web ページの下部に固定するために、さまざまな方法を試してきました。 「bottom:0px」や「position:absolute」などのメソッドを使用しても満足のいく結果が得られません。画面サイズに関係なくフッターがページの下部に配置されるようにするための解決策は次のとおりです:

1. フッター CSS を変更する:

#footer {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0;
    height: [desired height of footer, e.g., 50px];
    margin-bottom: 0;
}

2. マージンを追加本文:

フッターがページのコンテンツと重ならないようにするには、本文に余白を追加します:

body {
    margin-bottom: [same height as footer, e.g., 50px];
}

これにより、たとえページがスクロール可能のままであることが保証されます。固定フッター付き。要件に合わせて CSS コードの高さの値を調整します。

コード例:

<div>

#footer {
  background-color: red;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  margin-bottom: 0px;
}

body {
  margin-bottom: 50px;
}

このコードは、フッターをページの下部に固定します。ページを作成し、コンテンツが限られていても確実に表示されるようにします。

以上がコンテンツの高さに関係なく、フッターをページの下部に固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。