CSSを使用して、モバイルページの固定ヘッダーとフッター、スクロール可能なコンテンツ領域のレイアウトを実装する方法は？

モバイルページ：固定ヘッド、ボトム、スクロール可能なコンテンツ領域のCSSレイアウトソリューション

モバイル開発では、一般的な要件は次のとおりです。ページの頭と下部が固定されており、中央のコンテンツ領域を上下にスクロールできます。この記事では、この効果を達成するためにいくつかのCSSレイアウト方法を紹介します。 HTML構造には、ヘッダー（ .head ）、コンテンツ領域（ .content ）、フッター（ .foot ）の3つの部分が含まれているとします。

解決

1。 position: fixed;固定位置決め方法

この方法では、固定位置を使用して頭と下部を固定し、コンテンツ領域をスクロールできます。

 html、body {
  高さ：100％;
  マージン：0;
  パディング：0;
}

体 {
  ディスプレイ：Flex;
  フレックス方向：列;
}

。頭 {
  位置：修正;
  上：0;
  左：0;
  右：0;
  z-index：1000; /*頭がコンテンツの上にあることを確認してください*/
  バックグラウンドカラー：＃f8f8f8;
  パディング：10px;
}

。コンテンツ {
  フレックス：1; /*残りのスペースを占有*/
  Overflow-y：auto;
  パディングトップ：50px; /*頭の高さを考慮する*/
  パディングボトム：50px; /*底の高さを考慮してください*/
}

。足 {
  位置：修正;
  下：0;
  左：0;
  右：0;
  z-index：1000; /*底がコンテンツの上にあることを確認します*/
  バックグラウンドカラー：＃f8f8f8;
  パディング：10px;
}

.headおよび.foot使用position: fixed;修正、 z-indexコンテンツの上にあることを保証します。 .contentはflex: 1;残りのスペースを占有するには、 overflow-y: auto;スクロールを達成するため。 padding-topとpadding-bottom頭と底で不明瞭になっていることを避けます。

2。FlexBoxElastic Box Layout Method

FlexBoxは、このレイアウトを簡単に実装することもできます。

 html、body {
  高さ：100％;
  マージン：0;
  パディング：0;
}

体 {
  ディスプレイ：Flex;
  フレックス方向：列;
}

。頭 {
  Flex-Shrink：0; /*頭の収縮を防ぐ*/
  高さ：50px; /*ヘッドの高さを固定*/
  バックグラウンドカラー：＃f8f8f8;
  パディング：10px;
}

。コンテンツ {
  フレックス：1; /*残りのスペースを占有*/
  Overflow-y：auto;
  バックグラウンドカラー：#ffffff;
}

。足 {
  Flex-Shrink：0; /*底部収縮を防ぐ*/
  高さ：50px; /*底部の高さを固定*/
  バックグラウンドカラー：＃f8f8f8;
  パディング：10px;
}

flex-shrink: 0;縮小するのを防ぐために、 height特性は固定された高さを設定します。 .contentはflex: 1;残りのスペースを占有し、スクロールを設定します。

3。グリッドグリッドレイアウトメソッド

グリッドレイアウトも適用されます。

 html、body {
  高さ：100％;
  マージン：0;
  パディング：0;
}

体 {
  ディスプレイ：グリッド;
  グリッドテンプレート列：50px 1fr 50px; /*ヘッド、コンテンツ領域、底の高さを定義します*/
}

。頭 {
  バックグラウンドカラー：＃f8f8f8;
  パディング：10px;
}

。コンテンツ {
  Overflow-y：auto;
  バックグラウンドカラー：#ffffff;
}

。足 {
  バックグラウンドカラー：＃f8f8f8;
  パディング：10px;
}

grid-template-rowsヘッド、コンテンツ領域、および下部の行の高さを直接定義し、 1frコンテンツ領域が残りのスペースを占めることを意味します。 .content Settings Scroll。

上記の3つの方法はすべて、目標レイアウトを達成でき、選択する方法は個人の好みとプロジェクトのニーズに依存します。実際の状況に応じて、頭と下部の高さとスタイルを調整することを忘れないでください。

以上がCSSを使用して、モバイルページの固定ヘッダーとフッター、スクロール可能なコンテンツ領域のレイアウトを実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。