Q&A
前提・実現したいこと
HTML5のBody要素にて、背景画像を画面いっぱいに表示させ、下にスクロールさせれば、footerがそれに続くように配置したい。
発生している問題・エラーメッセージ
自分で用意した背景画像(1940px:1080px)の画像をBody要素に画面いっぱいに表示することは出来たが、Footerの位置がHeaderの下に配置されてしまう。自作背景画像の右下に波模様があるのでデザイン上その下にfooterを表示させたい。
エラーメッセージ
### 該当のソースコード <!DOCTYPE html> <html lang="En"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style1.css"> </head> <body> <header> <a href="" class="logo"><img src="css/images/logo.png"></a> <nav> <ul> <li><a href="">ABOUT SERVICE</li> <li><a href="">MEDIA</li> <li><a href="">PUBLIC</li> <li><a href="">CONTACT US</li> </ul> </nav> <a href="" class="btn">Signin</a> </header> <main> <h1>NEWS</h1> </main> <div class="footer"> <small><p class="copy-right">Copy right2021 ©</p></small> </div> </body> </html> 下記CSS記述header部分は省略しています。 @charset "UTF-8"; body{ background-image: url(../css/images/main12.png); background-size: cover; background-attachment: fixed; } div.footer{ width:100%; } small p.copy-right{ margin:0px; width:100%; background-color:#FF3399; color: white; font-size: 18px; text-align: center; } ```HTML5,CSS3 ソースコード
試したこと
<div>でbodyから外して<img>タグで調整したりしてみましたが背景画像が表示されません。body要素に背景いっぱいに表示させてからでは、そもそも下にfooterなど配置させることは出来ないのでしょうか？補足情報（FW/ツールのバージョンなど）
](0c752c76cb98141264077c6f3b1856a7.png)
Atomエディタ
回答1件
0
「Footerの位置がHeaderの下に配置されてしまう」の原因は、
mainの高さが足りないのでその下のfooterが上がってきているからです。
下記のようにmainの最小高さを設定すればいいでしょう。
279px は header と footer の高さの合計です。
css
1main { 2 min-height: calc(100vh - 279px); 3}
投稿2021/02/12 00:53
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/12 10:03
2021/02/12 11:06