Flexbox を使用して固定ヘッダーとフッターの間に流動的なコンテンツ DIV を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

Flexbox を使用して固定ヘッダーとフッターの間に流動的なコンテンツ DIV を作成するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-08 08:17:01

オリジナル

424 人が閲覧しました

How Can I Create a Fluid Content DIV Between a Fixed Header and Footer Using Flexbox?

ヘッダーとフッターの間に流動的なコンテンツ DIV を作成する

最新のレイアウトデザインを追求する中で、テーブルから div にピボットしました。ヘッダー、フッター、コンテンツ div を調整するという課題に直面しているあなたは、さまざまな画面解像度に対応できる洗練されたソリューションを求めています。

このレイアウトのジレンマに対する堅牢なソリューションを提供する Flexbox アプローチを検討してください。 Flexbox の固有の機能を活用すると、残りのスペースをシームレスに埋め、その境界内でスムーズにスクロールできるコンテンツ領域を備えたスティッキーなヘッダー要素とフッター要素という望ましい結果を達成できます。

Flexbox の実装

Flexbox の実装は簡単で、いくつかの HTML と CSS が必要です。調整:

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;
}

ログイン後にコピー

この設定ではヘッダー要素とフッター要素がロックされます指定されたサイズ内でコンテンツ領域を動的に拡張して残りの垂直方向のスペースを埋めることができます。 overflow-y プロパティと -webkit-overflow-scrolling プロパティにより、コンテンツ領域の高さを超えるコンテンツがその範囲内でスムーズにスクロールされるようになります。

Flexbox の機能の柔軟性と多用途性を活用して、シームレスに適応する調和のとれたレイアウトを簡単に作成できます。さまざまな画面解像度に対応します。

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