![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、
(ヘッダー+コンテンツ+フッター)の高さの合計=ウィンドウの高さ
が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。
Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。
とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。
-------------------------------
ヘッダー(固定)
-------------------------------
コンテンツ(可変)
※この部分のみにスクロールバーが現れることができる。
-------------------------------
フッター(固定)
-------------------------------
No.4
- 回答日時:
> 高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。
できますよ。方法は色々ありますが、今回は怠けさせて頂いて(すみません)サンプルのご紹介だけにとどめさせて頂きますので悪しからず…
「フッタ 固定 CSS」のキーワードでググってみて下さい。具体的サンプルが色々ヒットします。
質問者様のご希望に一番近いサンプル、というとこの辺りでしょうかね…?
http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/ …
ただし、いずれのサンプルもDOCTYPE宣言のヴァージョンやXML宣言の有無が異なる場合は意図しない表示になってしまう可能性がありますので、サンプルを使用される場合はそこを変更しない様にされた方が無難です。もしご自身の作成したいものが違う書式の場合は、必ず(その条件下でもサンプルと同様の表示結果になるか、を)検証し直される事をお奨めします。
情報ありがとうございます。たぶん、これは後方互換性を意図的に利用している方法ですよね。それにしてもbodyにpaddingを指定できるとは知りませんでした。
No.2
- 回答日時:
<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%;
}
確認していないので、参考までに。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML 全画面表示 リンク先の...
-
_blank?_brank?
-
FindWindowの使い方
-
サムネイル画像の表示途中でそ...
-
表示中のURLなどをバッチファイ...
-
HP、リンク先を最大化で開く方...
-
新しいタブで開かせない方法は...
-
flashのリンクの貼り方おしえて!
-
WinAPIでタブ付きのウィンドウ...
-
掲示板からIPアドレスってど...
-
AfterEffectsでイージーイーズ...
-
XMLを作成してもタグしか表示さ...
-
<br />タグの、brの後の半角ス...
-
アプレット XXXXXX notinited ...
-
ジャケットの革の素材がわかり...
-
aviutlで最後まで動画が読み込...
-
<br style="clear:both;">って...
-
ブラウザでのタイ語の改行について
-
Hタグを改行禁止にしてspanのよ...
-
H1タグに改行の<br>を使う
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
自分のサイトを開いた時にウィ...
-
指定URLを新しいウィンドウで開...
-
表示中のURLなどをバッチファイ...
-
新しいタブで開かせない方法は...
-
プルダウンメニューの開く方向...
-
DBからPDFを取得して別画面で表...
-
ハイパーリンクからメニュー無...
-
HTML,js)リンクを新しいタブで...
-
IEで別サイトをタブで開きたい
-
FindWindowの使い方
-
googleマップをポップアップウ...
-
インラインフレームの中の表示...
-
VC、コンソールアプリ結果の...
-
ホームページビルダーでのドロ...
-
_blank?_brank?
-
別ウィンドウで複数ページを同...
-
QT 半透明の画面生成について
-
VBのタブストリップについて
-
HTML 全画面表示 リンク先の...
-
htmlのボタンでF11を入力
おすすめ情報