フッターがページ幅全体を占めないようにするにはどうすればよいですか?

固定フッターのジレンマを解決する

スタイリングを試みても、「フッター」 div が占有できないという問題が発生しています。ページ幅全体に、その下に見える空白を残します。 CSS コードを詳しく調べて、解決策を明らかにしましょう。

現在の CSS には、「position:relative」や「top:490px」などのプロパティが含まれており、フッターを親コンテナを基準にして相対的に配置し、垂直方向に 490 オフセットします。ピクセル。このアプローチは基本的なシナリオでは機能するかもしれませんが、特にページのコンテンツが動的に変化する場合、フッターが常にページの下部に固定されるとは限りません。

代わりに、別の手法を検討してみましょう。

1. Sticky Footer メソッド:

このメソッドは、ビューポートを満たすのに十分なコンテンツがない場合でも、フッターをページの下部に残すことができる賢い CSS テクニックを利用しています。これには、「wrapper」 div の「min-height」プロパティを 100% に設定し、「footer」 div と「push」 div の両方で「height」を「142px」に設定することが含まれます。

html 、<br>体 {<br> 身長: 100%;<br>}</p><p>.wrapper {<br> min-height: 100%;<br> height: auto ! important;<br> height: 100%;<br>}</p> <p>.footer,<br>.push {<br> 高さ: 142px;<br>}<br>

2.フレックスボックス フッター メソッド:

このアプローチでは、フレックスボックス レイアウト モジュールを利用してフッターをページの下部に配置します。 'wrapper' div に 'display: flex' を設定し、要素を垂直方向に揃えるために 'flex-direction: column' を設定します。次に、「main」 div に「flex-grow: 1」を設定し、「footer」 div に「flex-shrink: 0」を設定します。

.wrapper {<br> display: flex ;<br> フレックス方向: 列;<br>}</p><p>.main {<br> flex-grow: 1;<br>}</p><p>.footer {<br> flex-shrink: 0;<br>}<br>

これらの利点メソッド:

• フッターがページの下部に配置されるようにします: どちらのメソッドも、フッターがページの下部に固定されたままであることを保証します。
• フッターの下の空白を削除します: この技術により、フッターの下に見苦しい空白が表示されるのを防ぎます。 footer.
• コンテンツの変更に対応: これらのメソッドは、ページ コンテンツの高さに基づいてフッターの位置を自動的に調整し、一貫性のある視覚的に魅力的なレイアウトを保証します。

以上がフッターがページ幅全体を占めないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。