Q&A
コードはきちんと```で囲って下さい。
また不要な部分は削除して下さい。
前提・実現したいこと
footerの位置を一番下にしたいです。
ここに質問の内容を詳しく書いてください。
footerの位置がおかしなところに配置されてしまいます。
おそらくhtmlのコードがおかしいのではと思うのですが、解決策が見つかりません
■■な機能を実装中に以下のエラーメッセージが発生しました。
該当のソースコード
<!DOCTYPE html> <html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ちづる1</title> <link rel="stylesheet" href="chizuru.css"/> <title>ちづる</title> </head> <body> <header> <div class="container"> <div class="logo"> <img src="logo.png"></div> <div class="header-list"> <ul> <li>Cute</li> <li>Cute</li> <li>Cute</li> </ul> </div> </div> </header> <div class="main"> <div class="copy-container"><img src="header.jpg"></div> <div class="copy"><h1>Our Ability</h1></div> <div class="contents"> <div class="contents-item"><img src="img1.png"> <h3>Heal</h3> <p>We are excellent.</p></div> <div class="contents-item"> <img src="img2.png"> <h3>Fly</h3> <p>We are talented.</p></div> <div class="contents-item"> <img src="img3.png"> <h3>Sleep</h3> <p>We are clever.</p></div> </div> <div class="section-title"> <h2>We are necessary for<br>human life</h2> <p>Because we are very cute.<br> Please leave it to us if you need help.</p> <div class="btn sinup">MORE</div> </div> <div class="section-title-logo"> <img src="img-right.jpg"></div> </div> <footer> <footer class="footer">copyright 2019 Shima-Enaga</footer> </footer> </body> </html>ソースコード
body {
font-family: "Avenir Next"; height: 1789px
}
.container{width: 1280px; height: 26px;}
.logo{padding:0px 150px; float: left; }
.header-list{ font-size:18px; font-family:ヒラギノ角ゴ ProN W3; text-align:right; margin-right: 150px;}
.header-list li{ list-style: none; float: right; display: inline-block; padding: 16px 30px 16px 0px; color:#555555;
}
.main{width:1280px; }
.copy-container{width:980px; height: 600px;}
.copy h1{ text-align: center; color:#555555;; margin:70px 548px; border-bottom: 5px solid #51A2BC; width:185px; display: inline-block; }
.contents{margin:52px ; text-align: center; color:#555555;}
.contents-item{ padding:50px; display: inline-block;}
.contents-item h3{margin:20px; font-size:32px;}
.contents-item p{font-size:20px; margin:32px;}
.section-title{float:left; width:335px; margin-left:150px; color:#555555;}
.h2{margin:80px; font-size:32px; }
.p{color:#555555;margin-top:30px;}
.sinup{font-size:22px;text-align:center;line-height: 50px;}
.btn{color:#51A2BC; border-radius:25px ;
border: solid 3px #51A2BC; height:50px;width:165px; display:inline-block; }
.section-title-logo{float: right;margin:20px 130px; }
footer{background-color: #D5D5D5;height:50px;margin-top:74.99px;
}
.footer{ color:#FFFFFF; font-size:12px;}
試したこと
CSSの<footer>のみに全てのコードを書いてみた
margin-topの値を変えてみた。
heightの値を変えていた。などです。
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
Try this:
css
1footer { 2 position: fixed; 3 bottom: 0; 4}
投稿2019/04/29 06:37
総合スコア1284
- HTML: for markup
- CSS: for Style (including layout)
Thank you!
あなたの回答
tips
プレビュー
