ヘッダーとメインとフッターを均等に配置したいです。

前提・実現したいこと

ヘッダーとメインコンテンツとフッターのセクションがあるページで、

ヘッダー：画面の一番上に配置
メイン：ヘッダーとフッターのちょうど中間に配置
フッター：画面の一番下に配置

以上のレイアウトにしたいです。

デモを作りましたので、よろしければご確認ください。
demo

実現したいことをデモで言うと、フッターを画面最下部に配置し、ヘッダーとフッターの間のちょうど真ん中にメインを配置したいです。

また、フッターは画面最下部に固定ではなく、メインのコンテンツ量に合わせてフッターも下がるようにしたいです。
その際もフッターの下に余白が出ないようにしたいです。

発生している問題

フッターの下に余白があります。

該当のソースコード

html
1<body>
2  <header>
3    <h1>header</h1>
4    <p>a</p>
5  </header>
6  <main>
7    <h2>main</h2>
8    <p>a</p>
9    <p>b</p>
10  </main>
11  <footer>
12    <h2>footer</h2>
13    <p>a</p>
14  </footer>
15</body>

css
1body {
2  width: 100vw;
3  text-align: center;
4  margin: 0;
5}
6
7header {
8  background: tomato;
9  padding: 1%;
10}
11
12main {
13  background: steelblue;
14  padding: 1%;
15}
16
17footer {
18  background: lightgreen;
19  padding: 1%;
20}

試したこと

全体を中央配置にし、ヘッダーとフッターをposition: absoluteでそれぞれ画面端に配置することで、見かけは均等に配置できました。
demo2
しかしメインのコンテンツ量が増えるほど、メインのコンテンツの上下がヘッダーとフッターの下に潜り込んでしまいます。

footerを常に最下部に固定する方法(簡単) - Qiita
また、上記ページを参考にしたことでフッターは最下部に、メインのコンテンツ量が増えるとフッターが下がりかつフッターの下に余白ができないようになりました。
しかし、メインの配置がヘッダーとフッターの真ん中になりません。

行動規範の内容に同意します

回答3件

ベストアンサー

ご希望のことは下記のようなことでしょうか。

css
1body {
2/*   width: 100vw; */
3  text-align: center;
4  margin: 0;
5  display: flex; /*追加*/
6  flex-wrap: wrap; /*追加*/
7  align-content:space-between; /*追加*/
8  min-height: 100vh; /*追加*/
9}
10
11header {
12  width: 100%; /*追加*/
13  background: tomato;
14  padding: 1%;
15}
16
17main {
18  width: 100%; /*追加*/
19  background: steelblue;
20  padding: 1%;
21}
22
23footer {
24  width: 100%; /*追加*/
25  background: lightgreen;
26  padding: 1%;
27}

動作確認用サンプル

Flexboxで垂直位置の余白を両端揃えで均等割り(space-between)にしてます。

あるいは、

css
1body {
2  text-align: center;
3  margin: 0;
4  display: flex;
5  flex-direction: column;
6  min-height: 100vh;
7}
8
9header {
10  background: tomato;
11  padding: 1%;
12}
13
14main {
15  background: steelblue;
16  padding: 1%;
17  margin: auto 0;
18}
19
20footer {
21  background: lightgreen;
22  padding: 1%;
23}

動作確認用サンプル

投稿2020/02/08 17:41

hatena19

総合スコア34075

CSS
1body {
2  width: 100vw;
3  text-align: center;
4  margin: 0;
5  /* ADD */
6  min-height: 100vh;
7  display: grid;
8  grid-template-rows: 1fr 1fr 1fr;
9}
10```**動くサンプル：**[https://jsfiddle.net/xtf3e6b9/](https://jsfiddle.net/xtf3e6b9/)
11
12---
13
14【これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA】
15[https://ics.media/entry/15921/](https://ics.media/entry/15921/)
16
17【CSS Grid Layout を極める！（基礎編） - Qiita】
18[https://qiita.com/kura07/items/e633b35e33e43240d363](https://qiita.com/kura07/items/e633b35e33e43240d363)

投稿2020/02/08 19:03

kei344

総合スコア69606

CSSに以下追加でいかがですか？

CSS
1/* footerを下にする */
2body {
3    display: flex;
4    flex-direction: column;
5    min-height: 100vh;
6}
7footer {
8  margin-top: auto;
9}
10/* mainを真ん中にする(というか3つの高さを均等にする) */
11body > * {
12    flex-grow: 1;
13}