ホームページ >ウェブフロントエンド >CSSチュートリアル >Flexbox を使用してヘッダー、コンテンツ、フッター Div 間のレスポンシブな間隔を実現するにはどうすればよいですか?
Flexbox を使用してヘッダー、コンテンツ、フッター Div 間のレスポンシブな間隔を実現するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-11-15 13:14:02751ブラウズ
ヘッダーとフッターの間のスペースを埋める Div 配置の解決
テーブルから div ベースのレイアウトへの移行では、共通のハードルが発生します。それは、ヘッダーとフッター間の一貫性のある応答性の高いスペースを確保することです。ヘッダー、コンテンツ、フッターの div。 Flexbox を使用した信頼性の高いアプローチは次のとおりです。
Flexbox ソリューション
フレックス レイアウトにより、スペースを動的に分散できるようになり、ヘッダーとフッターの高さを自然にしながら、コンテンツが残りの領域をシームレスに埋めることができます。これはネイティブ モバイル アプリの直感的な動作を模倣しており、ヘッダーとフッターがビューポートの上端と下端に固定され、メイン セクション内でコンテンツをスクロール可能なままにします。
HTML と CSS の実装
次のコードソリューションを示します:
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
Flexbox の柔軟性を活用することで、Web ページ内にエレガントかつ応答性の高いスペースを割り当てることができ、画面解像度に関係なく最適なユーザー エクスペリエンスを確保できます。
以上がFlexbox を使用してヘッダー、コンテンツ、フッター Div 間のレスポンシブな間隔を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。