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

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

新規登録して質問してみよう
ただいま回答率
85.38%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6273閲覧

フッターが浮いてしまう

yyymmm

総合スコア30

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/02/03 08:37

編集2020/02/03 09:02

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yyymmm

2020/02/03 08:49

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

回答2

0

ベストアンサー

現状の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

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

0

掲載していただいている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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.38%

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

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

質問する

関連した質問