CSS を使用してフッターを下部に固定するにはどうすればよいですか?

CSS でフッターの位置をマスターする: 下部に固定する

Web ページを作成するときは、フッターがページの下部に固定された状態になるようにします。ブラウザには共通の課題があります。解決策を詳しく調べて、特定のコードに対処し、このジレンマを克服するのに役立つテクニックを検討してみましょう。

よく失敗するアプローチの 1 つは、フッターの位置を相対位置に設定することです。この相対的な配置だけでは、フッターを下部に固定するには不十分です。

代わりに、絶対的な配置を使用してみてください。方法は次のとおりです:

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
}</code>

位置を絶対に設定することで、ドキュメントの通常の流れからフッターを切り離します。幅を 100% に設定するとブラウザの幅全体に広がりますが、bottom プロパティを 0 に設定すると最下部に固定されます。

あるいは、絶対位置と同様の固定位置を使用することもできます。ユーザーがページをスクロールしても要素は配置されますが、その位置が維持されます。ただし、固定位置はすべてのブラウザ、特に Internet Explorer と互換性がない可能性があります。

特定のコードで、フッター スタイルを次のように変更します。

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    height: 4em;
}</code>

この変更を適用すると、次のようになります。ページのコンテンツの長さに関係なく、ブラウザの下部にしっかりと根付いたままになるフッターが追加されました。

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