フッターの位置固定で他のdivの高さを可変させたい

締切済

質問者：me-jan
質問日時：2011/05/28 13:04
回答数：2件

上から順に
#header
#contener
#footerとdivが３つあるとして、
ブラウザのサイズをかえたときに、
#footerを最下部に固定したまま
#contenerのheightを可変させたいです。
（overflow-yはautoで）

最適なCSSを、どなたかご教示願います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： sora1tora2
回答日時：2011/05/29 09:32

こんにちは

たぶんこんな感じでしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta content="ja" http-equiv="content-Language" />
<meta content="text/css" http-equiv="content-style-type" />
<title>ホームページタイトル</title>
<meta content="キーワード1,キーワード2,キーワード3" name="keywords" />
<meta content="コンテンツの概要" name="discription" />
<meta content="名前" name="author" />
<meta content="著作権" name="copyright" />
<style>
*{
margin: 0;
padding: 0;
}
body,html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#wrap{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#header{
margin: 0;
padding: 0;
width: 100%;
height: 100px;
background-color: #f6ff06;
}
#contents{
margin: 0;
padding: 0;
width: 800px;
height100%;
background-color: #ffffff;
position: absolute;
top: 100px;
bottom: 100px;
overflow: auto;
}
#footer{
margin: 0;
padding: 0;
width: 100%;
height: 100px;
background-color: #ff0008;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="contener">
</div>
<div id="footer">
</div>
</div>
</body>
</html>

参考になればよいのですが。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2011/05/28 18:47

Web標準的には、するべきではない内容です。

小さなディスプレイや、ひろいディスプレイではとても使いにくいものになります。
CSSのhightが取得できるサイズは自身が内包されているコンテナブロックの高さです。

IE5,IE6の互換モードはバグがあって、height:100%でディスプレイのサイズを取得します。

　方法が下記のように、ないわけではありません。
height() - jQuery 日本語リファレンス ( http://semooh.jp/jquery/api/css/height/_/ )
　javascriptを停止している訪問者にはもちろん無効です。

　気持ちとしてはわかりますが、HTMLの本来の趣旨・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　からは、非推奨と言わざるを得ません。