ページまたはコンテンツの下部に残る固定フッターを作成する方法

フッターはページまたはコンテンツのいずれか低い方の下部に配置されます

内に動的に読み込まれるコンテンツの高さが

セクションはさまざまであり、複雑な問題が発生する可能性があります。セクションは、ブラウザ ウィンドウの下限に準拠しながら、表示されているコンテンツの下部に留まりますか?

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

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

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

article {
  flex: 1;
}

フレックスボックスを使用する利点がある人にとって、このスティッキー フッターを実現するのは簡単な作業です。ケーキ。高さを伸縮するラッパーでフレックス コンテナ内のすべての要素を囲むことにより、フッターは動的コンテンツに簡単に適応できます。

display: flex と flex-direction: column を使用してラッパー要素を構成するだけです。次に、次のように、フレックス値が 0 を超える兄弟要素を少なくとも 1 つ割り当てます。

<div>
<p></p>HTML マークアップ:このアプローチでは、フッターを効果的にヘッダーの下部に貼り付けます。コンテンツが短い場合はブラウザ ウィンドウを表示し、長いコンテンツの高さに合わせて位置を動的に調整します。</div>

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