要素が増えてもフッタをページ最下部に表示させる方法

コンテンツの高さが表示領域に満たない場合であっても、
フッタを最下部に表示させるため、下記のようなコードを書きました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title>test</title>
5</head>
6<body>
7  <main>
8    <div class="content">
9    </div>
10  </main>
11  <footer>
12  </footer>
13</body>
14</html>

CSS
1html, body {
2  margin: 0;
3  padding: 0;
4  width: 100%;
5  height: 100%;
6  background: white;
7}
8
9main {
10  width: 100%;
11  height: 100%;
12  background: whitesmoke;
13}
14
15.content {
16  padding: 60px 0 0 0;
17  min-height: 60px;
18  width: 100%;
19  background: gray;
20}
21
22footer {
23  left: 0;
24  right: 0;
25  bottom: 0;
26  margin: auto;
27  position: absolute;
28  width: 100%;
29  height: 60px;
30  background: orange;
31}

*動作確認⇒https://jsfiddle.net/94ej2a3p/

しかし、<div class="content">～</div>内には、動的に要素を増やしたいと考えているため、
下記のようにcontent内の要素が増えた場合、フッターの位置がおかしくなってしまいます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title>test</title>
5</head>
6<body>
7  <main>
8    <div class="content">
9      <br><br><br><br><br><br><br><br><br><br><br><br>
10      <br><br><br><br><br><br><br><br><br><br><br><br>
11    </div>
12  </main>
13  <footer>
14  </footer>
15</body>
16</html>

要件としては、下記を満たしたいです。
0. 「スクロールが発生しない範囲では、最下部にフッターを表示する」
0. 「スクロールが発生する範囲では、スクロールした最下部にフッターを表示する」
(スクロールに追従して常にフッターを固定表示させるわけではない)

どのように書き換えれば、フッタをページ最下部に表示させ続けることができるか、
ご教示いただきたく。よろしくお願いいたします。

m.ts10806

2018/05/01 22:44

CSSフレームワークを利用するという選択肢は考えられていないですか？

freeze

2018/05/02 11:46 編集

コメントありがとうございます。この通り、CSSの理解すら曖昧なレベルですので、もう少し扱えるようになってから考えてみようと思います。

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

回答5件

ベストアンサー

<footer>の高さが固定なので、<main>にmin-heightをかけて最低の高さを出せばいいでしょう（変更してみたfiddle）。

css
1main{
2  min-height: calc(100% - 60px);
3}
4
5/* footerのpositionやmarginなどは削除 */

投稿2018/05/02 00:04

maisumakun

総合スコア145184

freeze

2018/05/02 12:22

回答ありがとうございます。なるほど、理屈を聞けば単純ですが、calcという関数は初耳でした。。大変参考になりました。

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

こんにちは！

こちらでいかがでしょうか。
jsFiddle
差分はこちら

投稿2018/05/01 23:48

編集2018/05/02 01:14

退会済みユーザー

総合スコア0

freeze

2018/05/02 12:31 編集

回答ありがとうございます。拝見しましたが、mainをmin-heightにして、その分フッターを押し上げれば良かったんですね。。ただ、他の方の回答と比べてしまい恐縮ですが、フッターの高さ分、 mainと被ってしまうことを考えると、maisumakunさんのほうが使い勝手が良いように感じました。

退会済みユーザー

2018/05/02 13:23

被った分はフッターの高さ分マージンを付与してあげれば大丈夫ですよ。この手のやり方はたくさんあるので状況によって使い分けて下さい。

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

goolge で "html css footer" を検索してみました。

たとえばこんなページがヒットしました。

フッターを常に最下部（一番下）に表示する２つの方法【css or jQuery】 2012/08/09

https://webkikaku.co.jp/blog/htmlcss/footer-bottom/

これは情報が古いので、検索期間を 1年以内にしてみました。

CSS3の『flexbox』だけでフッターを一番下（最下部）に固定する

https://www.tipdip.jp/tips_posts/production/2213/

こんな風に情報検索してみては？

解決してらぜひ、解決方法を投稿すると良いです。

投稿2018/05/01 22:15

katoy

総合スコア22324

freeze

2018/05/02 12:07

回答ありがとうございます。この質問投稿後、今まで席を外していたため、ズバリ回答いただいてしまいました。。仰る通り、もう少し検索力と自己解決力を身に着ける必要はありそうです。

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

htmlとbodyにmin-height:100%;とか100vhでできないんでしたっけ？

投稿2018/05/01 23:45

sousuke

総合スコア3828

CSS
1footer {
2  left: 0;
3  right: 0;
4  bottom: 0;
5  margin: auto;
6  position: absolute;
7  width: 100%;
8  height: 60px;
9  background: orange;
10}