フッターが、ページごとに位置が変わってしまい、
浮いてしまったり、内容にかぶってしまったりしてしまいます...
常に一番下部にくるようにしたいのです。
いろんなサイトを参考にしたので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 © ーーーーー. 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
回答2件
あなたの回答
tips
プレビュー