Flexbox を使用してヘッダー、コンテンツ、フッター Div 間のレスポンシブな間隔を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Flexbox ソリューション

HTML と CSS の実装

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Patricia Arquette

Nov 15, 2024 pm 01:14 PM

How to Achieve Responsive Spacing between Header, Content, and Footer Divs using Flexbox?

ヘッダーとフッターの間のスペースを埋める 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 までご連絡ください。