- 締切済み
フッターの位置固定で他のdivの高さを可変させたい
上から順に #header #contener #footerとdivが３つあるとして、 ブラウザのサイズをかえたときに、 #footerを最下部に固定したまま #contenerのheightを可変させたいです。 （overflow-yはautoで） 最適なCSSを、どなたかご教示願います。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは たぶんこんな感じでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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"> <!-- header --></div> <div id="contener"> <!-- contener --></div> <div id="footer"> <!-- footer --></div> <!-- wrap --></div> </body> </html> 参考になればよいのですが。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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-html401j/intro/intro.html#h-2.2.1 )］より からは、非推奨と言わざるを得ません。
