HTML でスティッキー フッターを作成する方法

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

HTML ページでは、多くの場合、ページ下部に固定されたフッターがあることが望ましいです。コンテンツの長さに関係なく、ページの下部に表示されます。ただし、場合によっては、スタイルの問題により、フッター要素がページ幅全体を占められなかったり、フッター要素の下に空白が残ったりすることがあります。

この問題に対処するための一般的な解決策は、「スティッキー フッター」テクニックです。この方法では、本文コンテンツを含むラッパー要素と、フッターと同じ高さのプッシュ要素を作成します。

ラッパーの下マージンをフッターの高さに等しい負の値に設定することで、プッシュ要素は次のようになります。ページの一番下まで押し下げられました。これにより、ページの長さに関係なく、フッターが強制的に下端に固定されます。

例として、次の CSS コードを考えてみましょう:

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

HTML 構造:

<div class="wrapper">
  body goes here
  <div class="push"></div>
</div>
<div class="footer">Footer!</div>

この固定フッターのアプローチを実装することで、フッター要素がページの下部に固定されたままになり、ページ幅全体を埋めて不要な白い部分を排除することができます。スペース。

以上がHTML でスティッキー フッターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。