Safariでheight:100%のボックスを表示したいのです

Question

Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。以下、記述したCSSとHTMLです。 HTML---------

height100%のボックス

標準準拠のIEやfirefoxでbody直下にheight100%のボックス

・・・略

height100%のボックス

標準準拠のIEやfirefoxでbody直下にheight100%のボックス

・・・略

CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0

benelli · Accepted Answer

win版safariでは反応しております。
macについては、safariは1.2以前ではmin-heightプロパティをサポートしていません。なので1.2以前を使用していないでしょうか？

http://developer.apple.com/internet/safari/safari_css.html
（上記）

なので、結局min-heightは無効となって、heightは一度100%指定しているが次のセレクタでauto指定を上書き
しているので結局100%とならないことになります。

それとwinIEも６まではmin-heightに対応していませんが、同時にbody > #mainセレクタも無効なので結果的に
100%となっているだけですね。

なお、body > #mainセレクタは必要なのでしょうか？
まぁやってはいけないというわけではありませんが、あまりスマートなソースでは無い様に見受けられます＾＾；
これとっちゃえばsafariでも狙い通りになるかと思います。

以上です。

参考URL：http://developer.apple.com/internet/safari/safari_css.html

benelli · Answer

ども、＃１です。
　こちらはwin環境しかないので憶測でしかありませんが、まぁ何もしないよりは程度にお読みください。
　また、win環境ではFirefoxでもsafariでもネスケ7でも、height:100%だけで（body > #mainなしで）
問題なかったので、環境による差および影響が大きいことも承知願います。

----------------------------------------------------------------
(1)DIV要素の高さが内容分しか無い場合：
　win版safari3でいろいろ試したところ

「div要素ではheightもmin(max)-heightも有効だったが、body要素はheightは有効だったがmin(max)-heightは
効かない！」（safari以外は問題なし ※1 ）

（※1　厳密にはbody要素はブロック要素では無いので、IE6などのようにwidthもheightも無効とする動きも間違いではない？）


ことが分かりました。ここから考えるに、min(max)-heightの動作があやしいと思います。
safari3でも？？？な動作（※2）ですので、こういうバグっぽのは力技で対処でしょうか。

１．DOCTYPE宣言をして仕様通りのCSSに直す。
２．heightのいろんな部分に!important宣言を付けたり消したりして試す。
３．overflow:visible , overflow:autoをいろんなところで使用してみる。（macIEが崩れる可能性あり）

（※2　W3Cの勧告を読むと、％指定にて明確な高さが算出できないときはauto指定と同様となる、などと
書いてるため、どこにも絶対指定のない今回のCSSはどのような動作をしても勧告違反とはならないみたいですが）



(1)DIV要素の高さが十数pxだけ少ない場合：
　この場合は下部スライドバーの表示が消えているか、スタイル情報の初期化が足りない状態です。
bodyセレクタのwidthを99%にする、margin:0px を増やす、ブラウザを更新するなどで直ります。


----------------------------------------------------------------

症状を見たわけではないのではっきりとした事が言えず申し訳ありませんが、
こんな感じでCSSハックなりプロパティの増設なりで対処できるものと思いますのでがんばってください。

以上です。

参考URL：http://www.y-adagio.com/public/standards/tr_xsl10/slice7.html#height

Safariでheight:100%のボックスを表示したいのです

win版safariでは反応しております。

ども、＃１です。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング