footerの配置がうまくいかない

現状
・footer要素がcontentsの中に入ってしまっている

やりたい動き
・footerはcontentsの下に配置されてheader同様に横幅いっぱいに広げたい

前提条件
・footerはfooterタグを使い、divタグでfooterを作らない

floatとfloatをリセットするclearfixを使っているのですがイマイチイメージ通りに動きません。イメージはcontentsにclearfixが効いてfloatを解除し、その後ろの要素のfooterがheaderと同じように左右に広がると思ったんですが・・・
これらの動作を理解する目的もありますので、floatを使ってリセットにクリアフィックスを使う前提での解説をよろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja" class="">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6  <link rel="stylesheet" href="sample.css">
7</head>
8<body>
9    <header>
10    </header>
11      <div class="contents clearfix">
12        <div class="left-content">
13        </div>
14        <div class="right-content">
15        </div>
16        <div class="bottom-content">
17      </div>
18    <footer>
19    </footer>
20  </div>
21</body>
22</html>
23

CSS
1html, body{
2  display: flex;
3  height: 100%;
4  width:100%;
5  margin: 0;
6  padding: 0;
7}
8header{
9  position: fixed;
10  background-color: #333;
11  height: 70px;
12  width: 100%;
13  min-width: 960px;
14}
15.contents{
16  width: 960px;
17  background-color: #eee;
18  margin: 70px auto 0px;
19}
20.left-content{
21  background-color: red;
22  width: 700px;
23  height: 400px;
24  float: left;
25}
26.right-content{
27  background-color: yellow;
28  width: 260px;
29  height: 300px;
30  float: right;
31}
32.bottom-content{
33  background-color: green;
34  height: 250px;
35  margin-top: 400px;
36}
37.clearfix:after{
38  content:"";
39  display: block;
40  clear:both;
41}
42footer{
43  height: 60px;
44  background-color: #333;
45}
46

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

回答3件

ベストアンサー

footer要素がコンテンツの中に入ってしまっている原因は、既に他の回答者さんが書かれているように、footer要素がdiv.contents内に入っているからです。
質問者さんは、「ページ全体に対するフッター」を設定したいのだと思います。
しかし、質問文のコードでは、「div.contentsに対するフッター」を設定してしまっています。
そこで、この問題を解決するためには、まずはHTML構造を修正する必要があると思います。
今回の場合、HTML構造は以下のようになります。

HTML
1<header>&nbsp;</header>
2<div class="contents clearfix">
3    <div class="left-content"></div>
4    <div class="right-content"></div>
5    <div class="bottom-content"></div>
6</div>
7<footer>&nbsp;</footer>

そして、HTML構造を変更したことにより、CSSにも多少変更を加えなければなりません。
今回は、以下のようにすることで、質問者さんが実現したい動作が行えると思います。

CSS
1html, body {
2    display: flex;
3    flex-direction: column; /* 追加 */
4    height: 100%;
5    width: 100%;
6    margin: 0;
7    padding: 0;
8}
9
10header {
11    position: fixed;
12    background-color: #333;
13    height: 70px;
14    width: 100%;
15    min-width: 960px;
16}
17
18.contents {
19    width: 960px;
20    background-color: #eee;
21    margin: 70px auto 0;
22}
23
24.left-content {
25    background-color: red;
26    width: 700px;
27    height: 400px;
28    float: left;
29}
30
31.right-content {
32    background-color: yellow;
33    width: 260px;
34    height: 300px;
35    float: right;
36}
37
38.bottom-content {
39    background-color: green;
40    height: 250px;
41    margin-top: 400px;
42}
43
44.clearfix::after {
45    content: "";
46    display: block;
47    clear: both;
48}
49
50footer {
51    height: 60px;
52    background-color: #333;
53}

最終的なコードは、以下のようになります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <style>
7        html, body {
8            display: flex;
9            flex-direction: column;
10            height: 100%;
11            width: 100%;
12            margin: 0;
13            padding: 0;
14        }
15
16        header {
17            position: fixed;
18            background-color: #333;
19            height: 70px;
20            width: 100%;
21            min-width: 960px;
22        }
23
24        .contents {
25            width: 960px;
26            background-color: #eee;
27            margin: 70px auto 0;
28        }
29
30        .left-content {
31            background-color: red;
32            width: 700px;
33            height: 400px;
34            float: left;
35        }
36
37        .right-content {
38            background-color: yellow;
39            width: 260px;
40            height: 300px;
41            float: right;
42        }
43
44        .bottom-content {
45            background-color: green;
46            height: 250px;
47            margin-top: 400px;
48        }
49
50        .clearfix::after {
51            content: "";
52            display: block;
53            clear: both;
54        }
55
56        footer {
57            height: 60px;
58            background-color: #333;
59        }
60    </style>
61</head>
62<body>
63<header>&nbsp;</header>
64<div class="contents clearfix">
65    <div class="left-content"></div>
66    <div class="right-content"></div>
67    <div class="bottom-content"></div>
68</div>
69<footer>&nbsp;</footer>
70</body>
71</html>

追記
コメント欄にて「macOSでは、上記のコードを実行すると、footer要素の横幅が100%にならず、正常に動作しない」とのコメントを頂きました。
現在、この問題を検証出来ない環境にいるため、原因はわかりませんが、widthプロパティに100%を指定することで、この問題を解消することが可能なようです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <style>
7        html, body {
8            display: flex;
9            flex-direction: column;
10            height: 100%;
11            width: 100%;
12            margin: 0;
13            padding: 0;
14        }
15
16        header {
17            position: fixed;
18            background-color: #333;
19            height: 70px;
20            width: 100%;
21            min-width: 960px;
22        }
23
24        .contents {
25            width: 960px;
26            background-color: #eee;
27            margin: 70px auto 0;
28        }
29
30        .left-content {
31            background-color: red;
32            width: 700px;
33            height: 400px;
34            float: left;
35        }
36
37        .right-content {
38            background-color: yellow;
39            width: 260px;
40            height: 300px;
41            float: right;
42        }
43
44        .bottom-content {
45            background-color: green;
46            height: 250px;
47            margin-top: 400px;
48        }
49
50        .clearfix::after {
51            content: "";
52            display: block;
53            clear: both;
54        }
55
56        footer {
57            width: 100%; /* macOSの場合 */
58            height: 60px;
59            background-color: #333;
60        }
61    </style>
62</head>
63<body>
64<header>&nbsp;</header>
65<div class="contents clearfix">
66    <div class="left-content"></div>
67    <div class="right-content"></div>
68    <div class="bottom-content"></div>
69</div>
70<footer>&nbsp;</footer>
71</body>
72</html>

投稿2018/10/06 08:23

編集2018/10/06 16:53

s8_chu

総合スコア14731

choco_mint

2018/10/06 08:49

ありがとうございます。イメージ通りの配置にできました。今回追加していただいたflex-directionは初めて見たので調べて使いこなせるようにがんばります。

hectopascal1013

2018/10/06 15:26

一点だけ。 footerのwidth100%にしないと、Macの環境からでは、100%には広がりませんでした。 Winと違うのでしょうか?

choco_mint

2018/10/06 16:06

違うみたいですねこちらはheightとbackground-color以外指定していませんが、header同様に横幅いっぱい広がっています。

hectopascal1013

2018/10/06 16:09

ご参考までに、確認取られた環境をいくつか、ブラウザ種類、バージョンまでをお伝えいただければ。後学のために。ご面倒でしたら結構です。

s8_chu

2018/10/06 16:34 編集

hectopascal1013さん> ご指摘ありがとうございます。動作確認は以下のOS, ブラウザで行いました。 OS: Windows 10 ブラウザ: Firefox, Google Chrome, Operaの最新バージョン hectopascal1013さんが動作確認をされたOSはmacOSとのことですが、検証に使用したブラウザと、そのバージョンを教えていただけませんか？(恐らくSafariではないかと思いますが)

hectopascal1013

2018/10/06 16:36 編集

ご回答ありがとうございます。 Chrome FirefoxともにMac最新版です。 Win環境が今手元に無いため(自宅にはエミュ環境あるんですが、) Win環境確認はSafariでやっておりますが、下の私の解答で、s8_chuさんのおやりになっていることと変わらない結果を得ています。(flexは説明が複雑になるので、今回は省いていますが。。。)clearfix対応以外は、質問者さんの当初ご要望とおなじになっています。Footer固定でなければ、の話ですが。

hectopascal1013

2018/10/06 16:55

すいません。訂正まで。ありがとうございます。私が参考にした資料を提示します。 http://taneppa.net/float/ おそらく、floatの解除にclearfix対応しているため、floatの継承が次のfooterに影響を与えている可能性は残ります。理屈は通っているので、width指定で解決できる理由はそれだと推測しております。 Win環境での確認取れ次第また。

s8_chu

2018/10/06 17:24 編集

hectopascal1013さん> 返信ありがとうございます。 >Chrome FirefoxともにMac最新版です。 macOS上のFirefox, Google Chromeでも同様の問題が再現する、ということですね。 >Win環境確認はSafariでやっておりますが、...(省略) Windows上でSafariを使用したときはバグが再現しない、ということですね。ブラウザの原因ではないのかもしれませんね。 >おそらく、floatの解除にclearfix対応しているため、floatの継承が次のfooterに影響を与えている可能性は残ります。...(省略) なるほど、`float`プロパティの設定が関係している可能性も考えられますね。これまでの情報から、macOSで動作させたときに問題が発生することがわかりましたが、私自身がmacOSを扱った機会が少ないため、今回の問題の原因を突き止めることは難しそうです。そのため、回答文にmacOSに対応したコードと、修正点を追記しました。折角コメントして頂いたにもかかわらず、お役に立てず、申し訳ありません。

hectopascal1013

2018/10/06 23:05

言葉足らずですいません。 >macOS上のFirefox, Google Chromeでも同様の問題が再現する、ということですね。私の下の解答はWinで問題が発生するとのことですが、私が再現確認している問題は、width100%の件のみです。 >Windows上でSafariを使用したときはバグが再現しない、ということですね。すいませんが、Win版Safariはセキュリティーホール問題で開発中止になっているかと。私が確認とっているのは、Mac版safariで、開発モードの中に、ユーザーエージェントにより、旧IEやwin版chrome,firefoxのアルゴリズムを確認取れるということです。(あくまで擬似的になので、盲信はいけませんが。) https://wemo.tech/244 >なるほど、`float`プロパティの設定が関係している可能性も考えられますね。これは、前回提示URLでの考察ですので、私の推測も込ですので、正確ではありませんが、おそらくそのように思います(おそらく、clearfix対応した時に、footerの最後に空白行が入るのを懸念してのことだと思われます)。もし違うようでしたら、他の方からご指摘願います。 >これまでの情報から、macOSで動作させたときに問題が発生することがわかりましたが、私自身がmacOSを扱った機会が少ないため、今回の問題の原因を突き止めることは難しそうです。そのため、回答文にmacOSに対応したコードと、修正点を追記しました。折角コメントして頂いたにもかかわらず、お役に立てず、申し訳ありません。こちらこそ、細かい点申し訳ありません。Win7のIEだと、私の下記コードで、footerが隠れてしまうという点は確認取れました。 OS間の差異がここまで大きいとは。こちらこそ失礼しました。ご対応とご回答ありがとうございます。

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

この間違いがすぐにわからないのは、きちんとインデントをつけないからだと思います。

html
1<body>
2    <header>
3    </header>
4      <!-- ↓header は既に閉じている。ここでレベルを上げるのはおかしい -->
5      <div class="contents clearfix">
6        <div class="left-content">
7        </div>
8        <div class="right-content">
9        </div>
10        <div class="bottom-content">
11      </div>
12      <!-- ↑一つ上の div の閉じタグなので、レベルが下がるのはおかしい -->
13    <footer>
14    </footer>
15  </div>
16</body>

階層構造を意識して整形するとこんな感じになるでしょう。

html
1<body>
2  <header>
3  </header>
4  <div class="contents clearfix">
5    <div class="left-content">
6    </div>
7    <div class="right-content">
8    </div>
9    <div class="bottom-content">
10    </div>
11    <footer>
12    </footer>
13  </div>
14</body>

なぜかfooter が contents の中にありますね。
きちんとインデントをつけていれば、この手の間違いは見た瞬間にわかります。

投稿2018/10/06 08:06

R.Mizukami

総合スコア1086

choco_mint

2018/10/06 08:17

ほんとですね・・・なぜこれに気付かなかったのか・・・ありがとうございますでもfooterがまたheaderの下に潜り込んでしまうんですよね・・・やはりfloatは扱いにくいです

R.Mizukami

2018/10/06 08:48

もぐりこみ、というなら、header が display:fixed になっているので .contents からしてもぐりこむはずですよ。それ以前に、footer の幅が 0になってませんか？

choco_mint

2018/10/06 09:18

もぐりこみに関してはcontentsにマージントップでヘッダーと同じ高さを指定していたので、それで対応できると思っていたのですが、floatで浮いたものがcontentsに追加していたclearfixで解除されていないように見えていてfooterがcontentsより上に行く意味が分からず悶々としてました。これもdivの位置間違いが原因ですね。 footerの幅についてはブロック要素は幅を指定しないと横幅いっぱいに広がる特性があると習っていたので、あえて指定していませんでした。イメージ的にはcontentsの後にfooterが出てきて、横幅いっぱいに広がっていたはずでした。これについてもdivの位置を間違えていたので、それ以前の問題でしたが・・・汗先ほどdivの位置を直して確認したところ、今度はfooterがheaderに横並びになる形で移動していたので、contentsの外には出たのかなとは思いますが、今度はheaderの隣に行くのはなんでだ？という問題が出てきたのでまだまだ調べてみる必要がありそうです。回答ありがとうございました。

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

footerが広がらないのは、div contentsに囲われていて、その幅制限の中にfooterがあるから。
float leftで良いと思います。
clearはその"後"のdivや要素にかけるものですので、float最後の要素に書くものではないのではないかと。
その他、headerがfixedなので、トップマージンをかける場所を変えたりしてますが、
ご指定の構成なら、こういった程度で済むと思われます。
flexを使うほど複雑なことはしなくてもよいのでは?

<!DOCTYPE html>
<html lang="ja" class="">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
    <header>header
    </header>
    <div class="contents">
        <div class="left-content">left</div>
        <div class="right-content">right</div>
        <div class="bottom-content">bottom</div>
    </div>

    <footer>footer
    </footer>
  
  
<style>
  html, body{
  display: ;
  height: 100%;
  width:100%;
  margin: 0;
  padding: 0;
}
header{
  position:fixed ;
  background-color: gray;
  height: 70px;
  width: 100%;
  min-width: 960px;
}
.contents{
  width: 960px;
  background-color: #eee;
  margin:0 auto;
  
}
.left-content{
  padding:70px 0 0 0;
  background-color: red;
  width: 700px;
  height: 400px;
  float: left;
}
.right-content{
  padding:70px 0 0 0;
  background-color: yellow;
  width: 260px;
  height: 300px;
  float: left;
}
.bottom-content{
  background-color: green;
  height: 250px;
  width:100%;
  margin-top:;
  float:left
}

footer{
  clear:both;
  position: ;
  height: 60px;
  width:100%;
  background-color: aqua;
}
</style>
  
  
</body>
</html>

footer fixed版(+アルファでright-content 右寄せ版)

<!DOCTYPE html>
<html lang="ja" class="">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
    <header>header
    </header>
    <div class="contents">
        <div class="left-content">left</div>
        <div class="right-content">right</div>
        <div class="bottom-content">bottom</div>
    </div>

    <footer>footer
    </footer>
  
  
<style>
  html, body{
  display: ;
  height: 100%;
  width:100%;
  margin: 0;
  padding: 0;
}
header{
  position:fixed ;
  background-color: gray;
  height: 70px;
  width: 100%;
  min-width: 960px;
}
.contents{
  width: 960px;
  background-color: #eee;
  margin:0 auto;
  
}
.left-content{
  padding:70px 0 0 0;
  background-color: red;
  width: 700px;
  height: 400px;
  float: left;
}
.right-content{
  padding:70px 0 0 0;
  background-color: yellow;
  width: 200px;
  height: 300px;
  float: right;
}
.bottom-content{
  background-color: green;
  height: 250px;
  width:100%;
  margin-top:;
  float:left
}

footer{
  clear:both;
  position: fixed;
  height: 60px;
  width:100%;
  background-color: aqua;
  margin-top:600px;
}
</style>
  
  
</body>
</html>

投稿2018/10/06 00:51

編集2018/10/06 01:44

hectopascal1013

総合スコア466

choco_mint

2018/10/06 01:04

回答ありがとうございます。この構成で確認してみましたがfooterがheaderの後ろに隠れちゃいますね各要素も縦に並んでしまって配置もちがいますし… やはりfloat使うと難しいですかね？

hectopascal1013

2018/10/06 01:42 編集

>footerがheaderの後ろに隠れちゃいますね当方では隠れていないのですが。。。 chrome firefox最新版、IE10以上で確認済み。 footerはスクロールすることで下に見えます。 position fixedを入れたら隠れますけどね? その場合、画面高さをトップマージンに入れてやることで解決までは把握してますが、画面構成設計が、ある一定の大きさ限定できれいに表示されることになるのでおすすめできるかどうかはわかりません。ある程度、こういったフレームワーク的なものは、既存のきれいに構成されているものを利用する練習をした方が良いと思われます。初学で、どういった構成が必要で、自分なりに書いてみて、構文の意味するところを理解するのは大切なことでもありますけどね。 *footer fixed版も追加しときますが、ブラウザのツールバーがユーザー依存で、様々な高さ専有考えられますので、きれいにしたいなら、javascript等を併用することになると思いますよ? 一応Chromeできれいになるように計算して高さ入れましたが、他で崩れていることは確認してます。

choco_mint

2018/10/06 01:41

となるとOSでの差異かもしれませんね当方はWindows10環境なので・・・アドバイスありがとうございます。とりあえずfloatの件は一旦置いておいてdivでfooterを作って並べるようにしてみます。

hectopascal1013

2018/10/06 01:46

header footerはHTML5でのタグですが、細かい要望や仕様がある場合はブラウザ対応も限られるので、顧客層が多数の場合は使用をためらうところがありますね。 OS差は、safari開発モードで対応確認済みですので、おそらく他の可能性があります。実際にwinで確認してないので何とも言えませんが。

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

あなたの回答