ヘッダーとフッターを含むフルハイトの単一列 CSS レイアウトを作成するにはどうすればよいですか?

ヘッダーとフッターを含む CSS ベースの単一列レイアウトの作成

CSS レイアウト設計の範囲内で、ヘッダーとフッターを除いて、ページの高さ全体にわたる固定幅の単一列レイアウトを使用できます。遭遇した。この要件に応えるために、さまざまなアプローチが提案されていますが、それぞれに独自の長所と短所があります。

幸いなことに、最新のブラウザー (2015 年以降) では、display:flex プロパティを使用して簡単で信頼性の高いソリューションにアクセスできます。 。このアプローチにより、JavaScript の必要性がなくなり、クリーンで効率的な代替手段が提供されます。

display:flex を使用した解決策

display:flex を使用してレイアウトを実装するには、次の手順に従います。手順:

1. html 要素と body 要素の両方を、高さ 100%、パディングなし、および空白なしで設定します。 margin.
2. display:flex プロパティと flex-direction:column プロパティを body 要素に適用します。これにより、子要素が垂直方向に配置されます。
3. #main 要素を作成し、その flex-grow プロパティを 1 に設定します。これにより、要素が拡張されて残りの垂直方向のスペースが埋められます。
4. 使用CSS プロパティの min-height と background を使用して、ヘッダーとフッターを必要に応じてスタイル設定します。

例コード

html, body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div>

この手法を利用すると、指定された基準を満たす単一列のレイアウトを作成でき、最新のブラウザーとの互換性が確保されます。

以上がヘッダーとフッターを含むフルハイトの単一列 CSS レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。