フッターの位置を一番下に表示させたいのですが・・・

質問

表示方法について質問をさせてください。

現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分（ページ最下部）の表示項目を、必ずページの一番下に表示させたいのです・・・。

しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。

コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。

そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。

サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。

これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか？

ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。

回答No.4

font_color · ベストアンサー

＞今回のこの手法はポイントとしては・・合ってますでしょうか？

相対値の中の絶対値を指定する（分かり難くてすいません。）ことで画面最下部へ持ってきています。

positionについては代表的なものを挙げると、
position:relative;←相対
position:absolute;←絶対
※z-index←重なり順（ブラウザによって解釈の違い有）
などがあります。
また、
position:fixed; bottom:0;
などを使って固定してしまう方法もあります。
今回のようなフッターの位置指定については多くのサイトが
いろいろ例などを挙げているので参考にして試してみてください。

＞その際に、このpositionを使った・・などはありませんでしょうか？

positionに限らずですが、ブラウザによってはいろいろと不具合があります。
とくにIEは大変です。「CSSハック」などを覚えておくと対応できると思います。

お礼

何度もご対応頂きありがとう御座います。
感謝いたします。

回答No.3

font_color

こんにちは。
こんな感じでどうでしょう。
【CSS】
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#header {
background-color: #aaa;
height: 80px;
}
#container {
width: 100%;
background: #fff;
position: relative;
height: 100%;
min-height: 100%;
}
body > #container {
height: auto;
}
#contents {
padding-bottom: 50px;
}
#footer {
width: 100%;
background: #aaa;
position: absolute;
bottom: 0;
height: 50px;
}
#footer p {
padding: 0;
line-height: 50px;
}
【HTML】
<div id="container">
<div id="contents">
<div id="header">
<h1>ヘッダー</h1>
</div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>
<div id="footer"><p>フッター</p></div>
</div>

お礼

ありがとう御座います！！

こちらも試してみたところ実現することが出来ました。
この方法は、とても簡単ですね。

ちなみに、追加で質問してもいいでしょうか？^^;

今回のこの手法はポイントとしては

position: absolute;
bottom: 0;

だと思うのですが、合ってますでしょうか？
その際に、このpositionを使った定義で何か不具合など起こったことなどはありませんでしょうか？

特に内容であれば、とても簡単な定義に思うのですが、あまりpositionでの定義を行った経験が無くご質問させていただきました。

もし、可能であればで結構ですのでよろしくお願いします。

回答No.2

mezashi2000

こういう記事がありました

http://blog.creamu.com/mt/2009/01/css_sticky_footer.html

参考URL：

http://blog.creamu.com/mt/2009/01/css_sticky_footer.html

お礼

ありがとう御座います。

ネガティブマージンをとってbothするのですね、
なるほどです大変勉強になりました！

ちょっと難しい・・・というか理解するのに時間が掛かりましたが
こういった方法もあるのですね。ありがとう御座いました。

回答No.1

MOMON12345

CSSで位置指定するか、テーブルでスペースを確保してしまうのではダメでしょうか？
もっとちゃんとやるならば、javaなどを使って閲覧者のブラウザと画面サイズを取得し、それを元にレイアウトを動的に変更する手だと思います。