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

ページまたはコンテンツの下部のフッター

問題:

コンテンツ内で動的に読み込まれるコンテンツ高さは変えることができます。目標は、

を配置することです。コンテンツが広範囲にわたる場合はページの下部、制限されている場合はブラウザ ウィンドウの下部に表示されます。

回答:

フレックスボックスのバージョン:

Flexbox をサポートするブラウザの場合、簡単な解決策は、display: flex プロパティを一緒に使用することです。ラッパー要素 (#main-wrapper) の高さは 100% です。これにより、ラッパーがビューポート全体を埋めるように拡張されます。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

ラッパー内では、

flex 値は 1 にする必要があります。これにより、垂直方向に拡張できます。これにより、 が確実に表示されます。大きい方に応じて、常にページの下部またはコンテンツの下部にプッシュされます。

article {
  flex: 1;
}

改訂された HTML:

<div>

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