Flexbox を使用して、ヘッダーとフッターの間のスペースを埋める DIV を作成するにはどうすればよいですか?

ヘッダーとフッター DIV の間のスペースを埋めるための DIV の作成

Web サイトのレイアウトを設計するときは、多くの場合ヘッダーがあることが望ましいです。フッターとシームレスに流れるコンテンツ領域。この目的のために、DIV は従来のテーブルと比較して優れた柔軟性を提供します。

フッターがページの下部に残り、コンテンツ DIV が動的に調整されてヘッダーとフッターの間のスペースを埋めるようにするには、簡単な解決策があります。

Flexbox の実装

Flexbox は手段を提供しますページ上に要素を配置し、行と列の両方に要素を配置できるようにします。この例では、ヘッダーとフッターがそれぞれ上部と下部の位置に固定された状態で、レイアウトが列内に流れるようにしたいと考えています。

HTML 構造は、ヘッダー、メイン コンテンツ、フッターという単純なままです。

CSS は次のように適用できます。

説明

• フレックス方向: 列は、子を垂直に配置するようにフレックスボックスを設定します。
• フレックス: なしヘッダーとフッターに追加すると、余分なスペースが占有されるのを防ぎます。
• overflow-y: スクロールは垂直方向に有効になります。メイン コンテンツ領域内をスクロールし、ページのコンテンツが残りのスペースに収まるようにします。
• -webkit-overflow-scrolling: touch はタッチ デバイスのスクロール動作を最適化します。
• flex: auto はメイン コンテンツを許可します。画面解像度に関係なく、ヘッダーとフッターの間の残りのスペースを動的に埋めるコンテンツ領域。

追加考慮事項

コンテンツが使用可能なスペースを超える場合、メイン コンテンツ領域内に垂直スクロールバーが表示されます。

Flexbox を利用すると、コンテンツが動的に適応するレイアウトを簡単に作成できます。固定ヘッダーとフッターの間のスペースを埋めることで、レスポンシブで視覚的に魅力的なデザインが得られます。

以上がFlexbox を使用して、ヘッダーとフッターの間のスペースを埋める DIV を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。