現状
・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
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
footer
要素がコンテンツの中に入ってしまっている原因は、既に他の回答者さんが書かれているように、footer
要素がdiv.contents
内に入っているからです。
質問者さんは、「ページ全体に対するフッター」を設定したいのだと思います。
しかし、質問文のコードでは、「div.contents
に対するフッター」を設定してしまっています。
そこで、この問題を解決するためには、まずはHTML構造を修正する必要があると思います。
今回の場合、HTML構造は以下のようになります。
HTML
1<header> </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> </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> </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> </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> </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> </footer> 71</body> 72</html>
投稿2018/10/06 08:23
編集2018/10/06 16:53総合スコア14731
0
この間違いがすぐにわからないのは、きちんとインデントをつけないからだと思います。
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
総合スコア1086
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/06 08:48
2018/10/06 09:18
0
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総合スコア466
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/06 01:04
2018/10/06 01:42 編集
2018/10/06 01:41
2018/10/06 01:46
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/06 08:49
2018/10/06 15:26
2018/10/06 16:06
2018/10/06 16:09
2018/10/06 16:34 編集
2018/10/06 16:36 編集
2018/10/06 16:55
2018/10/06 17:24 編集
2018/10/06 23:05