Web デザインでヘッダーとフッターを含む中央揃えの 1 列レイアウトを作成するにはどうすればよいですか?

ヘッダーとフッターを備えた単一列の集中固定幅デザイン

Web デザインの領域では、次のような単一列のレイアウトを実現します。ヘッダー要素とフッター要素を収容しながら、画面全体に広がるコンテンツを中央に配置することは、非常に重要な作業となる可能性があります。この質問では、いくつかのアプローチと、この設計要件に対するそれらの適合性について詳しく説明します。

アプローチ 1: 擬似中心を使用した 3 列

中央に調整されたマージンを持つ 3 つの列を作成します。中央の柱と高さを拡張するための疑似中央要素が提案されています。ただし、不要な空のサイド列が導入され、実用性が損なわれます。

アプローチ 2: 自動マージンと上部オフセットを使用した単一列

自動マージンを使用して単一列を配置します。センタリングと上部オフセットにより、目的の効果を得ることができます。ただし、列を拡張して残りの高さを占めるには、さらに検討する必要があります。

解決策: Flexbox

現代のブラウザの場合、Flexbox の出現により簡単な解決策が提供されます。 Flexbox は包括的なレイアウト制御を提供し、単一列のデザインを簡単に作成できるようにします。

JavaScript の使用はお勧めできません。代わりに、次の CSS コードを推奨します:

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><p>このソリューションでは、Flexbox を利用して単一列レイアウトを作成し、#main 要素が残りの高さ (ヘッダーとフッターを除く) を占めます。オプションのヘッダーとフッターのスタイルは、必要に応じてカスタマイズできます。</p></div>

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