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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

4回答

3471閲覧

コンテンツの高さが足らなくてもCSSでフッターを最下部に固定する

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2015/04/13 04:39

編集2015/04/13 08:00

初めまして。
今、独学でサイトを作成しているのですが、フッターを固定するやり方がどうもうまくいきません。
調べて、いろんなやり方を試すも、結局うまくいかず...。
出来たと思ったら、次はコンテンツに重なってしまいます。
わかる方、お答え頂けると助かります。
※HTML5とCSS3のみ使用しています。

以下、現在のコードです。
必要だと思う部分のみ記載させていただいております。

lang

1<body> 2 <div id="back_ground"> 3 <header>・・・・・</header> 4 <div id="middle"> 5 <!--この中にコンテンツ--> 6 </div> 7 <footer> 8 <div class="footer-inner"> 9 <p>|&nbsp;<a href="">TOPへ</a>&nbsp;|</p> 10 <p>Copyright &copy; All Rights Reserved.</p> 11 </div> 12 </footer> 13 </div> 14</body>

lang

1/*----- 基本設定 -----*/ 2html , body { 3 height: 100%; 4 width: 100%; 5 margin: 0; 6 padding: 0; 7} 8html { 9 height: 100%; 10 overflow-y: scroll; 11} 12#back_ground { 13 width: 100%; 14 position: relative; 15 min-height: 100%; 16 background-color: #fff; 17 text-align: center; 18} 19#middle { 20 width: 920px; 21 margin: 30px auto; 22 overflow: hidden; 23 background: #fff; 24 border: #ccc solid 3px; 25} 26footer { 27 width: 100%; 28 height: 100px; 29 text-align: center; 30 position: absolute; 31 bottom: 0; 32 background-color: #ffd8b2; 33} 34footer .footer-inner { 35 height: 100px; 36 background-color: #ffd8b2; 37 text-align: left; 38 margin: 0 auto; 39 width: 920px; 40}

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

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

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

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

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

guest

回答4

0

ベストアンサー

コチラではこのようになりました

・コンテンツの高さがfooterに満たない
![イメージ説明]WIDTH:600
・コンテンツが高くスクロールバーが表示される
![イメージ説明]WIDTH:600

いかがでしょうか。

投稿2015/04/13 07:33

__sath

総合スコア10

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

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

退会済みユーザー

退会済みユーザー

2015/04/13 07:55

サンプルまで作成していただき、有難う御座います。 __sath様が作成してくださったコードを参考にこちらで再編集し、思っていた通りに表示することができました。 色々と説明不足が多く、申し訳御座いませんでした。 これからも質問する機会があるかと思いますので、その際はまたよろしくお願い致します。
guest

0

サンプルでテストという文字を沢山入れてみました。
最後のテストという文字が中身の最後になります。
![イメージ説明]WIDTH:600
これではないでしょうか?

よろしくお願いいたします!

投稿2015/04/13 07:26

MasakazuFukami

総合スコア1869

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

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

退会済みユーザー

退会済みユーザー

2015/04/13 07:34

その てすとてすとてすと の文字が、今は縦いっぱいにあると思うのですが、 3行くらいしかなくても同じ位置にfooterがあればいいのですが、、、 ご理解いただけましたでしょうか。
guest

0

上の方の回答を拝見致しました。

footerは、常に最下部に表示したいのではなく、コンテンツが少なくてもfooterの下に空白を作らずに表示をさせたいのです。(例を挿入しましたのでご覧ください)

こちらの意味がよくわからないので教えて頂けますでしょうか?

投稿2015/04/13 07:03

MasakazuFukami

総合スコア1869

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

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

退会済みユーザー

退会済みユーザー

2015/04/13 07:15

回答有難う御座います。 また、説眼不足で申し訳御座いません。 上に表示例の画像を挿入しておりますので、そちらを見ていただくのが一番わかりやすいかと思うのですが、いかがでしょうか。
MasakazuFukami

2015/04/13 07:20

申し訳ございません。 僕の理解不足なのですが、参考画像を見てもいまいち意味がわかりません(´;ω;`) 参考画像のとおりだとfooterにpositino:fixed;をつければ解決しそうなのですが。。。 すいません。
MasakazuFukami

2015/04/13 07:24

ちなみに #middle{}にpadding-bottom:80px; footer{position:fixed;} とかをつけてもダメでしょうか?
退会済みユーザー

退会済みユーザー

2015/04/13 07:32

position:fixed;ですと、確かに最下部に表示されますが、スクロールする時に一緒についてきてしまうと思うのです。 そうではなく、 スクロールした底辺(?)の部分に表示させたい、ということです。 >ちなみに >#middle{}にpadding-bottom:80px; >footer{position:fixed;} >とかをつけてもダメでしょうか? こちらの方法でもダメでした...
MasakazuFukami

2015/04/13 07:37

あーなるほど。 やっと理解しました!すいません! 申し訳ございませんが、知識が足りないためにjavascriptを使う方法しか思いつきません。
退会済みユーザー

退会済みユーザー

2015/04/13 07:51

いえ、こちらこそ申し訳御座いません。 色々と考えて下さり、サンプルまで作成していただいて有難う御座います。 時期にJsの勉強も始める予定ですので、その際はよろしくお願い致します。
guest

0

はじめまして
コード拝見させていただきました。
とりあえず要件を満たすという事であれば
footer の position に fixed を使ってみてはいかがでしょうか?
その後 #middle 周りを調整すれば大丈夫かと思います。

一緒に fixed に関する仕様や挙動のリサーチもしてみると尚良いかと思います。
※スマートフォンでの表示を考えているのであれば、お勧めは出来ませんのであしからず

投稿2015/04/13 05:00

編集2015/04/13 05:21
__sath

総合スコア10

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

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

退会済みユーザー

退会済みユーザー

2015/04/13 06:25

回答有難う御座います。 footerは、常に最下部に表示したいのではなく、コンテンツが少なくてもfooterの下に空白を作らずに表示をさせたいのです。(例を挿入しましたのでご覧ください) こちらの方法は、わかりますでしょうか?
__sath

2015/04/13 07:01

なるほど、これは失礼致しました。 少し見てみましたが、そうすると #back_ground に display: inline-block; を追加し #middle の margin-bottom を footer の高さと同じだけ開けてあげると (今回の例であれば margin: 30px auto; → margin: 30px auto 100px auto; という感じですかね) うまくいくのではないでしょうか。 二度手間となってしまい申し訳ありません。
退会済みユーザー

退会済みユーザー

2015/04/13 07:13

こちらこそ、説明不足で申し訳御座いません。 そちらのやり方は過去にやったのですが、middleに重なってしまい、だめでした。 このやり方の場合は、middleの中にもうひとつdivを入れたほうがよろしいのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問