ホームページ >ウェブフロントエンド >CSSチュートリアル >ページまたはコンテンツの下部に残る固定フッターを作成する方法
フレックスボックスのバージョン
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>HTML マークアップ:このアプローチでは、フッターを効果的にヘッダーの下部に貼り付けます。コンテンツが短い場合はブラウザ ウィンドウを表示し、長いコンテンツの高さに合わせて位置を動的に調整します。
以上がページまたはコンテンツの下部に残る固定フッターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。