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

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

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

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

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

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

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

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

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

No.1 回答者： MOMON12345 回答日時： 2009/05/07 19:03

CSSで位置指定するか、テーブルでスペースを確保してしまうのではダメでしょうか？

もっとちゃんとやるならば、javaなどを使って閲覧者のブラウザと画面サイズを取得し、それを元にレイアウトを動的に変更する手だと思います。

No.2 回答者： mezashi2000 回答日時： 2009/05/07 19:11

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

http://blog.creamu.com/mt/2009/01/css_sticky_foo …

参考URL：http://blog.creamu.com/mt/2009/01/css_sticky_foo …

この回答へのお礼

ありがとう御座います。

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

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

お礼日時：2009/05/07 19:46

No.3 回答者： font_color 回答日時： 2009/05/07 19:21

こんにちは。

こんな感じでどうでしょう。
【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での定義を行った経験が無くご質問させていただきました。

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

お礼日時：2009/05/07 19:50

No.4 ベストアンサー 回答者： font_color 回答日時： 2009/05/07 20:51

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

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

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

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

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

この回答へのお礼

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

お礼日時：2009/05/07 22:30