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

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

ただいまの
回答率

87.58%

フッターを一番下にまで持って行きたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 366
退会済みユーザー

退会済みユーザー

夜分遅くに失礼いたします。
コーディングの練習を行っている者です。
フッターが何故かこの「about」の所まで来てしまいます。
修正を試みましたが、どうもうまくいきません。どなたかご教示をお願い致します。


<HTML>

<!DOCTYPE html> 
<html lang="ja">
<head>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>pasutayasan</title>
<link rel="stylesheet" href="./css/reset.css"> 
<link rel="stylesheet" href=stylesheet.css> 
</head> 

<body>
<header>
<div class="header-logo"><a href=""><img src="logo.png"></a>
<div class="header-list">
<ul>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
</ul>
</div>
</div>
</header>

<main>
<div class="mv">
<a href=""><img src="mainvisual.png"></a>
</div>
<section class="menu">
<h2>Menu</h2>
<div class="item_box">
<ul>

<li>
<img src="menu_img1.png">
<h3>Menu1</h3>
<p>We are excellent.</p>
</li>

<li>
<img src="menu_img2.png">
<h3>Menu2</h3>
<p>We are excellent.</p>
</li>

<li>
<img src="menu_img3.png">
<h3>Menu3</h3>
<p>We are excellent.</p>
</li>

</ul>
</div>
</section>

<section class="about">
<h2>About</h2>
<div class="about_box">
<div class="about_img">
<img src="about_img.png">
</div>

<div class="about_description">
<h2>Lorem ipsum dolor sit<br>
amet,consectetur</h2>
<p>adipiscing elit,sed do eiusmod<br>
tempor incidedunt ut labore et dolore</p>
<a href="#" class="button">MORE</a>
</div>
</div>
</section>
</main>

<footer>
2020
</footer>
</body>
</html>


css

@charset "UTF-8";

body{
margin: 0;
padding: 0;
color: black;
font-size: 15px;
}

a{
color:black;
}

a:visited{
color:#d8bfd8; 
}

a:hover{
color:#dda0dd;
font-weight:700;
text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}

p {
margin-top: 0;
line-height: 1.8;
}

header{
width: 1032px;
height: 85px;
margin: 0 auto;
}

.header-logo{
padding-top:15px;
padding-left: 12px;
padding-bottom: 15px;
}

.header-list{
float: right;
padding-right:12px;
padding-bottom: 15px;
}

.header-list ul li{
display:inline-block; 
width: 65px;
justify-content: space-between; 
}

main{
width: 1032px;
height: 900px;
margin: 0 auto;
}    

main img{
height: 483px; 
}

.menu h2{
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
text-decoration: underline red;
font-size: 30px;

.item_box ul{
display: flex;     
justify-content: space-between;
padding-left: 0;

}
.item_box ul li{
display:inline-block;
text-align: center;
}

.item_box img{
width: 250px;
height: 200px;
}

.item_box ul li h3{
margin-bottom: 0;
}

.item_box{
padding: 0 100px;
}

.about > h2{
text-align: center;   
text-decoration: underline red;
font-size: 30px;
padding-bottom: 20px;
margin-bottom: 0;
}

.about_description h2{
font-size: 25px;
margin-left: 40px;
justify-content: space-between;
}

.about_description p{
font-size: 20px;
margin-left: 40px;
}

.about_description a{
font-size: 20px;
margin-left: 40px;
background: #fff;
color:#ff0000;
border: solid 3px #ff0000;
border-radius:20px 20px 20px 20px;
display: block;
width: 105px;
height: 30px;
text-align: center;
text-decoration:none;
padding:0 15px;
}

.about_img img{
float:right;
width: 400px;
height: 260px;
padding-right: 100px;   
}

.about_description{
margin-left: 40px;
}

footer{ 
color: gray;
text-align: center;
}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

float:right;で画像を右寄せにしてますが、これが後の要素に影響を与えてます。
float を解除するには、clear: both;  が必要になります。

footer{ 
  color: gray;
  text-align: center;
  background-color: #333;
  clear: both; /* 追加 */
}

float は後の要素のレイアウトに影響を与えるので、現在は Flexbox で横並びさせるのが主流です。
いちど調べてみることをお勧めします。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る