Flexboxを使用してヘッダーとフッターの間のスペースをDivで埋める方法は?-CSSチュートリアル-php.cn

Flexboxを使用してヘッダーとフッターの間のスペースをDivで埋める方法は?

Linda Hamilton

リリース： 2024-11-19 06:10:03

オリジナル

681 人が閲覧しました

How to Fill the Space Between Header and Footer with Divs Using Flexbox?

ヘッダーとフッターの間のスペースを Div で埋める

レイアウトのためにテーブルから div に移行する場合、共通の課題は、目的の配置を維持しながら動的なコンテンツの高さに対応することです。ここでは、固定ヘッダーとフッターの間のスペース全体を埋める div を作成する方法を説明します。

Flexbox ソリューション

Flex レイアウトは、このシナリオに洗練されたソリューションを提供し、コンテナー要素 (ヘッダーとフッター) を許可します。 ) コンテンツ領域の自動調整を有効にしながら、固定の高さを遵守します。この設定は、モバイルアプリのデフォルトの動作に似ています。

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 div がフレックスコンテナになり、その子要素 (ヘッダー、メイン、フッター) はフレックス項目になります。 flex-direction プロパティは、フレックス項目の方向、この場合は垂直 (列) を指定します。

ヘッダー要素とフッター要素は flex: none に設定されます。これは、要素が相対的に縮小したり拡大したりしないことを意味します。初期寸法を維持し、固定の高さを維持します。一方、メイン要素は flex: auto に設定され、残りのスペースを埋める必要があることを示します。

さらに、メイン要素に overflow-y:scroll が適用され、垂直スクロールが導入されます。コンテンツが利用可能なスペースを超えています。 -webkit-overflow-scrolling: touch プロパティは、iOS デバイスでのスクロール動作を改善します。

この設定により、ヘッダーとフッターがそれぞれの上部と下部の位置に固定されたままになる一方で、コンテンツは柔軟で動的なレイアウトが効果的に作成されます。 div はそれらの間のスペースをシームレスに埋めて、さまざまな画面の高さに対応します。

以上がFlexboxを使用してヘッダーとフッターの間のスペースをDivで埋める方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。