Flexbox を使用してヘッダー、コンテンツ、フッター Div 間のレスポンシブな間隔を実現するにはどうすればよいですか?

ヘッダーとフッターの間のスペースを埋める Div 配置の解決

テーブルから div ベースのレイアウトへの移行では、共通のハードルが発生します。それは、ヘッダーとフッター間の一貫性のある応答性の高いスペースを確保することです。ヘッダー、コンテンツ、フッターの div。 Flexbox を使用した信頼性の高いアプローチは次のとおりです。

Flexbox ソリューション

フレックス レイアウトにより、スペースを動的に分散できるようになり、ヘッダーとフッターの高さを自然にしながら、コンテンツが残りの領域をシームレスに埋めることができます。これはネイティブ モバイル アプリの直感的な動作を模倣しており、ヘッダーとフッターがビューポートの上端と下端に固定され、メイン セクション内でコンテンツをスクロール可能なままにします。

HTML と CSS の実装

次のコードソリューションを示します:

  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
  

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 サイトの他の関連記事を参照してください。