質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

html/cssでfooterの位置が下にこない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 239

latenshrimp1

score 12

前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/04/29 15:38

    コードはきちんと```で囲って下さい。
    また不要な部分は削除して下さい。

    キャンセル

  • latenshrimp1

    2019/04/29 17:43

    了解です。
    初めて投稿したので不慣れでした。
    ご指摘ありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+1

Try this:

footer {
  position: fixed;
  bottom: 0;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/29 15:39

    - HTML: for markup
    - CSS: for Style (including layout)

    キャンセル

  • 2019/04/29 16:00

    Thank you!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる