Flexboxを使用してヘッダーとフッターの間のスペースを埋めるDivを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-10 03:23:02

オリジナル

284 人が閲覧しました

How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

ヘッダーとフッターの 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 サイトの他の関連記事を参照してください。