ホームページ > 記事 > ウェブフロントエンド > Flexboxを使用してヘッダーとフッターの間のスペースを埋めるDivを作成するにはどうすればよいですか?
Flexboxを使用してヘッダーとフッターの間のスペースを埋めるDivを作成するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-11-10 03:23:02266ブラウズ
ヘッダーとフッターの Div 間のスペースを埋めるための Div の作成
テーブルベースのレイアウトから div の使用に移行する場合、ヘッダー、コンテンツ、フッター間の適切なスペースを維持する要素は課題になる可能性があります。 Flexbox を使用した効果的なソリューションは次のとおりです。
Flexbox ソリューション
Flexbox を使用すると、柔軟で応答性の高いレイアウトが可能になり、コンテンツ領域が残りの領域を埋める間、ヘッダーとフッターは固定されたままになります。 space.
HTML:
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS:
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;
}
このコードでは、body 要素がフレックスボックス列として表示され、ヘッダーとフッターはflex: none として設定すると、拡大または縮小しないことを示します。コンテンツを含むメイン要素は flex: auto として設定され、残りのスペースをすべて占有することができます。 overflow-y プロパティと -webkit-overflow-scrolling プロパティにより、メイン要素内でコンテンツを垂直にスクロールできるようになります。
このアプローチにより、さまざまな画面解像度に合わせて調整する動的なレイアウトが可能になり、ヘッダーとコンテンツが利用可能なスペースを埋める間、フッターは固定されたままになります。
以上がFlexboxを使用してヘッダーとフッターの間のスペースを埋めるDivを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。