ヘッダー・フッター固定でコンテンツのみ可変

質問

高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、
（ヘッダー＋コンテンツ＋フッター）の高さの合計＝ウィンドウの高さ
が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。

Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。

とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。

-------------------------------
ヘッダー（固定）
-------------------------------
コンテンツ（可変）
※この部分のみにスクロールバーが現れることができる。

-------------------------------
フッター（固定）
-------------------------------

回答No.4

abril

> 高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。

できますよ。方法は色々ありますが、今回は怠けさせて頂いて（すみません）サンプルのご紹介だけにとどめさせて頂きますので悪しからず…

「フッタ　固定　CSS」のキーワードでググってみて下さい。具体的サンプルが色々ヒットします。
質問者様のご希望に一番近いサンプル、というとこの辺りでしょうかね…？
http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/header_footer.html

ただし、いずれのサンプルもDOCTYPE宣言のヴァージョンやXML宣言の有無が異なる場合は意図しない表示になってしまう可能性がありますので、サンプルを使用される場合はそこを変更しない様にされた方が無難です。もしご自身の作成したいものが違う書式の場合は、必ず（その条件下でもサンプルと同様の表示結果になるか、を）検証し直される事をお奨めします。

お礼

情報ありがとうございます。たぶん、これは後方互換性を意図的に利用している方法ですよね。それにしてもbodyにpaddingを指定できるとは知りませんでした。

回答No.3

noname#66720

すいません、意図されているものと違いますね。
＃２は忘れてください。

回答No.2

noname#66720

<h1 id="HEADER">ヘッダー</h1>
<div id="CONTENT">コンテンツ</div>
<p id="FOOTER">フッター</p>

#HEADER {
width:800px;
height:50px;
position:absolute; top:0;
}

#CONTENT {
width:800px;
padding:50px 0;
}

#FOOTER {
width:800px;
height:50px;
position:absolute; bottom:0;
}

こんな感じでやるとできると思います。
もし上のソースでフッターが一番下までいかない場合は下の指定を追加してみてください。

body {
height:100%;
}

html>body {
height:auto;
min-height:100%;
}

確認していないので、参考までに。

回答No.1

maman53

IE6（7は不明）以外ならposition: fixed;を使用（こちらは滑らか）

どうしてもIE6でも使用したいのならposition: fixed;をIEでも擬似的にしようできるスクリプトが出ているよ

お礼

IE8.jsなどは以前使ったことがあるのですが、他のライブラリに影響を与えたことがあるので、ためらっていました。
でも、ありがとうございました。