Q&A
ありがとうございます。
positionで再度配置してみます。
HTML
!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>確認問題</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="header-left"></div> </header> <div class="contents"> <div class="left-content"></div> <div class="contents-main"> <footer class="footer"></footer> </div> </div> </body> </html>CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.header{
background-color: blue;
position: fixed;
height: 180px;
width: 100%;
}
.header-left{
background-color: pink;
position: fixed;
height: 180px;
width: 300px;
}
.contents{
background-color: gray;
height: 100%;
width: 100%;
}
.left-content{
background-color: red;
height: 100%;
width: 300px;
;
}
.footer{
background-color: black;
float: right;
height: 60px;
width : calc(100% - 300px);
}
実装すると左下に空白が出来てしまします。
空白もleft-contentで赤くしたいのですがどうすれば宜しいでしょうか？？
回答2件
0
ベストアンサー
完成図がどんなものかわからないので合っているかわかりませんが。
display:flexでleft-contentを左側、他を右側に指定するといけるかと。
html
1 <div class="contents" style="display:flex;"> 2 <div class="left-content"></div> 3 <div class="contents-main"> 4 <footer class="footer"></footer> 5 </div> 6 </div>
あとfloatは使うことはないので、フレックスボックスに慣れた方がいいですよ。
divの構造がイメージできたらcss楽になりますよ。
投稿2020/05/01 11:27
総合スコア28
0
htmlの宣言部やcssの「;」の数など気になるところはありますがおいておきます。
.footerのスタイルを、floatではなくpositionを使って配置するのが一番手取りばやいと思います。
投稿2020/05/01 10:28
編集2020/05/01 10:29
総合スコア1135
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/01 11:31
2020/05/01 11:36
2020/05/02 07:33