height:100%について

解決済

質問者：mobius9
質問日時：2010/03/18 17:00
回答数：2件

height:100%について

質問させて頂きます。
例えば、divをheight100%,他は適当で定義したとするとその要素は一応ブラウザの上から下まで伸びてくれます。
しかしながらその状態でブラウザを中途半端なサイズにリサイズすると、下まで伸びなくなってしまうのです。途中で切れてしまう感じです。
fixedではリサイズに対応して常に伸びきってくれるのですが、absoluteでは上手くいかないのです。
absoluteでこれを解決する方法を教えて頂けたら幸いです。

通報する

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

質問の本文を隠す

回答 (2件)

No.1

回答者： hujitomo
回答日時：2010/03/19 00:51

fixed や absolute の前に

＞divをheight100%,他は適当で定義したとするとその要素は一応ブラウザの上から下まで伸びてくれます

って普通は div にのみ height:100% を指定してもブラウザの上から下までは表示されません。もしも表示されるのだとしたら、それは互換モードでレンダリングされているからです。その表示は CSS の本来の仕様とは異なる動作ですので注意してください。
CSS を本来の仕様通りに使いたいのならば、正しくドキュメントタイプを記述することが必要です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>sample</title>
<style type="text/css">

</style>
</head>
<body>
<div>text</div>
</body>
</html>

確認してみてください。上記のソースでは div は 100% の高さになりません。
要素の height を百分率で指定すると、そのサイズというのは親要素の height から算出されます。上記のソースの場合、 div の親要素は body です。body の height の初期値は auto ですので→ auto の 100% → つまりは auto となってしまうのです。ですので、div の高さを 100% にしたいならば、 body 、さらにはその親要素である html にそれぞれ height:100% を指定してやる必要があるのです。
上記のソースのスタイルシートに以下の記述を追加してみてください。

html,body {
margin:0;
height:100%;
}

これでようやく div の高さが意図した通りになりました。
とにかく、互換モードで表示させている CSS の挙動がおかしい場合、いくら CSS 解説サイトなどを見ても解決できないことが多いです（解説サイトさんは CSS の本来の仕様に基づく解説をしている訳ですから当然ですね）
まずは正しい書式で html を記述する癖をつけた方が、今後の為にも役立つと思いますよ。

この回答への補足

情報量不足ですみません。
>div の高さを 100% にしたいならば、 body 、さらにはその親要素である html にそれぞれ height:100% を指定してやる必要があるのです。
これ前提でのお話です。

補足日時：2010/03/19 01:05

通報する

- 0
- 件

通報する

No.2ベストアンサー

回答者： hujitomo
回答日時：2010/03/22 12:36

＞これ前提でのお話です。

だとしたら、仮に div 要素の position 属性が absolute でもなんでも普通に上から下まで表示される筈ですが？（たとえリサイズしようとも）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>sample</title>
<style type="text/css">

</style>
</head>
<body>
<div>text</div>
</body>
</html>

上記のソースで代表的な４つのレンダリングエンジンを搭載した各ブラウザ（Firefox 3.6、IE8、Opera 10、Safari 4.0）で確認済みです。一体どんな素敵ブラウザをご利用なさっているのでしょう？

埒が明かないので、その上手く表示できないソースを（環境も含め）提示したほうが具体的なアドバイスを得られやすいかと思います。