フッターが浮いてしまう

フッターが、ページごとに位置が変わってしまい、
浮いてしまったり、内容にかぶってしまったりしてしまいます...
常に一番下部にくるようにしたいのです。
いろんなサイトを参考にしたのでcssがぐちゃぐちゃになってしまっているかも
しれませんが、アドバイスお願いいたします。
（リセットcssや、その他関係ありそうな部分のcssを載せます）

html
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="UTF-8">
6    <title>-------</title>
7      
8      
9     <link rel="stylesheet" href="style.css" type="text/css" media="screen">
10     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
11      
12      
13  </head>
14  <body>
15      
16      <!--header-->
17      <!--wrapper-->
18      <div id="wrapper">
19      <header>
20      
21   
22   
23    <h1><img src="images/logo.png" alt="－－－－－"></h1>
24   
25    <div id="right">
26    <ul>
27          <li><a href="https://www.youtube.com/watch?v=bmhQB4KrZOs&t=5s"><img src="images/youtube.png" alt="Youtube" class="icon">
28          </a></li>
29          <li><a href="http://inagumanodoumoradio.seesaa.net/"><img src="images/radio.png" alt="ラジオ" class="icon"></a>
30          </li>
31         <li><a href="https://ameblo.jp/s--inaguma/"><img src="images/blog.png" alt="ブログ" class="icon"></a>
32          </li>
33         <li><a href="https://twitter.com/shunyainaguma"><img src="images/twitter.png" alt="Twitter" class="icon"></a>
34          </li>
35          
36          
37     </ul>
38    </div>
39  
40          
41     <nav> 
42         <ul>
43      
44      <li><a href="index.html">ホーム</a></li>
45            <li><a href="introduction.html">自己紹介</a></li>
46                <li><a href="live.html">ライブ情報</a></li>
47                <li><a href="disc.html">CD/DVD</a></li>
48                <li><a href="media.html">メディア出演</a></li>
49                <li><a href="contact.html">問い合わせ</a></li>
50             
51             
52        </ul>     
53      </nav>
54  
55       
56      </header>
57      
58    <div id="contents">
59    
60    <div class="mainimage_0">
61        <img src="images/icon.jpg" alt="メイン画像">
62      </div>
63      
64     
65   <div id="youtube"> 
66       
67       <div id="youtube_left">
68        <iframe width="400" height="270" src="https://www.youtube.com/embed/bmhQB4KrZOs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
69       </div><!--         youtubeleft-->
70    
71      
72         <div class="balloon1">
73           <p>－－－－－－－－
74
75            <br>－－－－－－
76　　　　　　　<br>－－－－－－－</p>
77         </div>
78       
79    </div><!--youtube-->
80   
81    
82      </div><!--contents-->
83   
84      </div>    
85         
86    <!--wrapper閉じ-->
87    
88    
89      
90   <footer>
91    <div id="footer_inner">
92     <div class="copyright">Copyright  &copy;  ーーーーー. All Rights Reserved.
93        </div></div>
94      </footer>
95      
96      
97    
98      
99  </body>
100</html>
101
102
103
104
105css
106
107/*===================
108======================
109リセットcss
110=======================
111======================*/
112
113/* http://meyerweb.com/eric/tools/css/reset/ 
114   v2.0 | 20110126
115   License: none (public domain)
116*/
117
118html, body, div, span, applet, object, iframe,
119h1, h2, h3, h4, h5, h6, p, blockquote, pre,
120a, abbr, acronym, address, big, cite, code,
121del, dfn, em, img, ins, kbd, q, s, samp,
122small, strike, strong, sub, sup, tt, var,
123b, u, i, center,
124dl, dt, dd, ol, ul, li,
125fieldset, form, label, legend,
126table, caption, tbody, tfoot, thead, tr, th, td,
127article, aside, canvas, details, embed, 
128figure, figcaption, footer, header, hgroup, 
129menu, nav, output, ruby, section, summary,
130time, mark, audio, video {
131	margin: 0;
132	padding: 0;
133	border: 0;
134	font-size: 100%;
135	font: inherit;
136	vertical-align: baseline;
137}
138/* HTML5 display-role reset for older browsers */
139article, aside, details, figcaption, figure, 
140footer, header, hgroup, menu, nav, section {
141	display: block;
142}
143body {
144	line-height: 1;
145}
146ol, ul {
147	list-style: none;
148}
149blockquote, q {
150	quotes: none;
151}
152blockquote:before, blockquote:after,
153q:before, q:after {
154	content: '';
155	content: none;
156}
157table {
158	border-collapse: collapse;
159	border-spacing: 0;
160}
161
162
163----------------------
164html body headerあたりのcss
165----------------------
166
167html{
168    height: 100%;
169}
170
171body{
172    height: 100%;
173}
174
175#wrapper{
176    position: relative;
177    min-height: 100%;
178    margin: 0 auto;
179    width: 960px;
180    height: 100%;
181   
182   
183    
184 
185}
186
187header{
188    width: 960px;
189    height: 80px;
190    margin-top: 20px;
191    position: relative;
192    
193・
194・
195・
196・
197
198
199
200
201
202
203
204
205/*===================
206======================
207フッター
208=======================
209======================*/
210
211footer{
212 height: 50px; /*フッターの高さ*/
213 margin-top: auto;
214 position: absolute;
215    bottom: 0;
216 width: 100%; 
217 background-color: #73b55e;
218
219}
220
221
222
223#footer_inner{
224   padding-top: 20px 0;
225}
226
227
228.copyright {
229  font-size: 10px;
230 font-weight: bold;
231  text-align: center;
232  line-height: 50px;
233  color: #fff;
234}
235

Lhankor_Mhy

2020/02/03 08:47

「ページごとに位置が変わってしまい」とのことですが、実際にはどの位置に置きたいのですか？期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1

yyymmm

2020/02/03 08:49

失礼しました。常に一番下部に置きたいです。直します

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

回答2件

ベストアンサー

現状のCSSに下記を追加すれば「常に下部」にいくと思います。

css
1body {
2    display: flex;
3    flex-flow: column;
4    min-height: 100vh;
5}
6#wrapper {
7    flex: 1;
8}
9footer {
10    height: 50px;
11    background: red;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}

もし「常に下部」が「常に表示しつつ下部に固定」という意味でしたら、上とさらに下記追加です。

css
1#wrapper {
2    padding-bottom: 50px;
3}
4footer {
5    position: fixed;
6    right: 0;
7    bottom: 0;
8    left: 0;
9}
10

投稿2020/02/03 09:27

ikatako

総合スコア270

yyymmm

2020/02/03 09:33

参考になりました。ありがとうございました！

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

掲載していただいているcssであれば
bodyを下記にすると、コンテンツが長くてもかぶったりしないと思われます。

body{
    height: 100%;
    min-height: 100vh;
    position: relative;
    padding-bottom: 50px;
    box-sizing: border-box;
}

下記、参考になります。
https://techacademy.jp/magazine/19410

投稿2020/02/03 09:14

okubo

総合スコア18

yyymmm

2020/02/03 09:34

申し訳ありません。こちらで解決したので、ベストアンサーにしようとしたら間違えて他の方を選んでしまいました（；；）もし変更のしかた分かれば教えてください。。。本当にありがとうございましたm(__)m！！

okubo

2020/02/04 01:39

解決してよかったです＾＾変更の仕方はわからないのですが、ikatakoさんの回答にあるように最近はflexboxを使ったレイアウトをよく使われるようになってきてます。ですのでベストアンサーはそのままでもいいのではないでしょうか。flexは全然難しくなくてすごく簡単ですので、この際そちらを使ってみるのもアリだと思いますよー！

yyymmm

2020/02/04 06:40

ご丁寧に、ありがとうございます・・・！

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

あなたの回答