フッターの位置がうまくいかないです

フッターをページの一番下に配置したい

フッターを一番下に配置したいのですがうまくいきません
画面の下には固定されるのですがページの一番下に固定されません

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>AAAAA</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <meta name="description" content="株式会社AAAのホームページです。">
8    <meta name="keywords" content="aaaaa">
9    <link rel="stylesheet" href="css/menu.css">
10    <link rel="stylesheet" href="css/anime.css">
11    <link rel="stylesheet" href="css/footer.css">
12    <link rel="stylesheet" href="css/home.css">
13
14      <nav class="fix">
15       <div class="inner flex">
16         <div class="logo">
17           <a href="home.html">AAAAAAA</a>
18         </div>
19
20         <div class="menu">
21           <ul class="snip1226">
22                   <li><a href="manufacturing.html" data-hover="MANUFACTURING">MANUFACTURING</a></li>
23          　　　　　<li><a href="product.html" data-hover="PRODUCT">PRODUCT</a></li>
24          　　　　　<li><a href="company.html" data-hover="COMPANY">COMPANY</a></li>
25          　　　　　<li><a href="recruit.html" data-hover="RECRUIT">RECRUIT</a></li>
26          　　　　　<li><a href="contact.html" data-hover="CONTACT">CONTACT</a></li>
27           </ul>
28         </div>
29         </div>
30     </nav>
31
32  <body>
33      <p class="menuchar">AAAAAAA CO.Ltd.</p>
34
35<div>
36  <img src="image/golf.jpg" width=100% alt="golf" >
37</div>
38
39 <div>
40  <img src="image/jockey.jpg" width=100% alt="jockey" >
41 </div>
42
43</body>
44
45
46    <footer class="footer">
47      <p class="copyright">AAAAAAA CO.Ltd.</p>
48    </footer>
49
50
51
52
53</html>
54

css
1footer{
2 color: #000000;
3 background-color:#FFFFFF;/*フッターの背景色指定*/
4 height:300px;/*フッターの縦の大きさ*/
5 width:100%;/*フッターの横幅*/
6 position: absolute;
7 bottom: 0;
8}
9 .copyright{
10   position: absolute;/*←絶対位置*/
11   bottom: 30px;
12   right: 30px;
13 }
14
15/*home画面関連*/
16
17.inner{
18 max-width:100%;/*領域幅の最大値*/
19 margin:0px auto;
20 width:90%;/*横幅の指定*/
21}
22
23.golf{
24  position: relative;
25  text-align:center;
26
27}
28.jockey{
29  position: relative;
30  text-align:center;
31
32}
33
34body{
35  height: auto;
36}
37

補足情報


![イメージ説明](c151462287f5e775ec68ec765f8e4187.png)

![イメージ説明](24b201e78103ffe36cbb78b0e62b6506.png)




最初の画面上でのみ下に固定されている状態です

行動規範の内容に同意します

回答4件

言いたい事がいまいち分かりませんが、そもそもbodyタグの場所おかしくないですか？

投稿2020/06/19 04:05

LKawauso

総合スコア13

LKawauso

2020/06/19 04:10

headタグも閉じられてないですし

tsuyoshin

2020/06/19 07:04

すいません誰にでもわかるように言うと、ディスプレイで見るときに開いた画面の下部分にはフッターとして出てきますが、scrollした場合、フッターもそのままscrollしてしまうということですページ自体の最下部には固定されていません bodyタグはなぜ間違っているのですか？？？

tsuyoshin

2020/06/19 07:06

headはそのままにしてたのわすれてましたすいませんん

Daregada

2020/06/19 07:38

ヘッダーやフッターの領域も含め、画面に表示される内容はすべて body要素の内容に書いてください。

tsuyoshin

2020/06/19 07:41

そうだったんですね、わかりました！

行動規範の内容に同意します

css
1footer {
2  /*略*/
3
4 
5  /* position: absolute; */
6
7
8  /*略*/
9}

投稿2020/06/19 03:51

編集2020/06/19 03:55

kyoya0819

総合スコア10429

tsuyoshin

2020/06/19 03:54

常に固定されてページの写っているのは嫌なんですよね、一番下にscrollした時にだけ映るものにしたくて。。。

行動規範の内容に同意します

自己解決

positionをrelative;にしてなおしました

投稿2020/06/19 08:27

tsuyoshin

総合スコア3

こちらの方法はいかがでしょうか
https://qiita.com/nozomi716/items/2b09d5bce3d08d1c41f9

投稿2020/06/19 03:59

編集2020/06/19 03:59

meli

総合スコア312

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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