スタイルシートで画面を上下に分割，高さを上部はpxで指定，下部は残り全部にする方法

解決済

質問者：KettaMachine
質問日時：2006/09/17 22:46
回答数：3件

画面を上下に分けて，上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い，次のようにしてみたんですがうまくいきません．

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>

要は下部の「残り全部」のやり方がわかっておらず，全体的な高さが100px+100%になり，表示画面より下に100pxはみ出してしまいます．
次のようにdivを入れ子にするとうまくいくんですが，内部に表示させる内容によっては不具合が出るので，どうしてもdivどうしが独立した形で実現させたいです．

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100%; background-color:#fcc; ">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
</div>
</body>
</html>

他の質問サイトでも尋ねてみたのですが，質問の意味を理解してもらえずに別に問題はないという回答を１件頂いたのみで解決できませんでした．また，テーブルではなく必ずスタイルシートで実現したいです．対策をご存知の方，ご教示よろしくお願いします．

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： steel_gray
回答日時：2006/09/18 10:06

思い出したのでIE対応にするための追記。

前回のサンプルの<head>～</head>に以下を追加。


参考
http://www.keynavi.net/ja/bugh/comments.html
http://useyan.x0.com/s/html/expression/

- 0
- 件

通報する

この回答へのお礼

こんなに完璧な回答を頂けるとは．．．ただただ驚くばかりです．すごい方にご教示頂けて本当によかったです．ありがとうございました．これ以上の回答はこの世に存在しないと思いますのでこれで締め切ります．可能なら１万ポイントぐらい差し上げたいです．．．

通報する

お礼日時：2006/09/18 11:53

No.2

回答者： steel_gray
回答日時：2006/09/18 01:11

CSSとしてはやりよう(※1)はあるんですが、WinIEのバグ(※2)のために実質的には不可能です。

※2
http://members.at.infoseek.co.jp/cssbug/detail/w …

※1 FirefoxやOperaではOK
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html {height:100%;}
body{
margin:0;
padding:0;
height:100%;
}
#Header {
height:100px;
background-color:#cfc;
}
#Content {
position:absolute;
top:100px;
left:0;
right:0;
bottom:0;
overflow:auto;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="Header">
Header
</div>
<div id="Content">
<p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
<p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
<p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
<p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
</div>
</body>
</html>