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

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

HTML では、フッターは通常、「footer」という名前の div クラスで表されます。この要素をページの下部に固定するには、特定の CSS プロパティを実装する必要があります。

提供された CSS コードは、フッターを上部の値 490px を基準にして相対的に配置します。これは、フッターをページの下部に固定するのには適していません。底。さらに、コードでは幅プロパティが指定されていないため、フッターがページ幅を埋めません。

固定フッターを作成するには、CSS プロパティの組み合わせを使用できます。一般的なアプローチの 1 つは、「スティッキー フッター」技術を利用することです。実装方法は次のとおりです。

/* Sticky Footer by Ryan Fait */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.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 */
}

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

この手法を使用すると、ページ コンテンツの高さが調整されても、フッター要素はページの下部に固定されたままになります。

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