Q&A
mainの</div>が足りませんでした。修正し表示されるようになりました。
本当にありがとうございました。
HTML CSS ```### 前提・実現したいこと footerを表示させたいです HTMLとCSSを勉強をし始めました。 今、レイアウトの勉強に入りました。 現在Google ChromeとSublime Textを使用しています。 main部分の中央よせをした際にfooterが潜り込まないように、 <div class="main clearfix"> で潜り込みを回避しようといているのですが、上記コードでmain部分に潜り込まないようになると思うんですが 肝心のfooterが表示されない状態です ### 発生している問題・エラーメッセージ main部分の中央寄せができましたが下のfooterが消えてしまっっている状態です。 ### 該当のソースコード ソースコード HTML <!DOCTYPE html> <div class="main clearfix"> <div class="blog"></div> <div class="sidebar"></div> <div class="footer"></div> </body> </html> CSS *{ margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ""; display: block; clear: both; } .main{ width: 840px; background-color: green; margin: auto; } .blog{ width: 600px; height: 1400px; background-color:palegreen; float: left; } .sidebar{ width: 240px; height:1400px; background-color: limegreen; float: left; } .footer{ width: 100%; height: 120px; background-color: blue; } ※途中は省略いたしました。 ### 試したこと ここに問題に対して試したことを記載してください。 NETで検索しfooterの固定など調べたのですが、Mainの中央よせの際の記事などが見つけられませんでした。 まだ初心者なので記事の内容を応用で試すこともできずお聞きしたいです。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
足りない</div>を追加してください。
html
1<div class="main clearfix"> 2 <div class="blog"></div> 3 <div class="sidebar"></div> 4</div> /* 追加 */ 5<div class="footer"></div>
あるいは、
html
1<div class="main clearfix"> 2 <div class="blog"></div> 3 <div class="sidebar"></div> 4 <div class="footer"></div> 5</div> /* 追加 */
というように、mainの中に footer を入れるなら、
footer に clear: both; を追加して、回り込みを解除しましょう。
css
1.footer{ 2width: 100%; 3height: 120px; 4background-color: blue; 5clear: both; /* 追加 */ 6}
投稿2020/08/11 04:56
総合スコア34057
0
</div>の数が足りていないので、適切な場所に入れましょう。
投稿2020/08/11 04:35
総合スコア69583
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/11 12:44