Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
  • ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:Safariでheight:100%のボックスを表示したいのです)

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

このQ&Aのポイント
  • Safariでheight:100%のボックスを表示する方法について
  • 他のブラウザでは成功したが、Safariではうまくいかない理由
  • CSSとHTMLのコードの一部を示し、解決策を探す

質問者が選んだベストアンサー

  • ベストアンサー
  • benelli
  • ベストアンサー率51% (78/152)
回答No.1

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も6まではmin-heightに対応していませんが、同時にbody > #mainセレクタも無効なので結果的に 100%となっているだけですね。 なお、body > #mainセレクタは必要なのでしょうか? まぁやってはいけないというわけではありませんが、あまりスマートなソースでは無い様に見受けられます^^; これとっちゃえばsafariでも狙い通りになるかと思います。 以上です。

参考URL:
http://developer.apple.com/internet/safari/safari_css.html
yamatoneko
質問者

お礼

お礼が遅くなり申し訳ございません。ご回答ありがとうございました。 min-heightは、Operaの為、body > #mainはFirefoxの為必要としております。IEやSarafiのためのものではございません(Operaに関しては特にどうでもいいのですが、念のため程度で・・・・)。 ちなみに、body > #mainを削除してしまうと、Firefoxでレイアウトがくずれしまいますのでこれはこれで必要としております。 また、Safariのバージョンは最新を使っております。

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • benelli
  • ベストアンサー率51% (78/152)
回答No.2

ども、#1です。  こちらは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)ですので、こういうバグっぽのは力技で対処でしょうか。 1.DOCTYPE宣言をして仕様通りのCSSに直す。 2.heightのいろんな部分に!important宣言を付けたり消したりして試す。 3.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
yamatoneko
質問者

お礼

再度ご回答ありがとうございます! win版safari3はまだ試したこともないのですが、min(max)-heightに関しては無くてもいいな・・・と思っているものなので、削除の方向で試していこうと思います。 現時点ではまだSafariは確認必須ブラウザになっていないので、自己満足で確認用としてつかっているのですが、近々Safariも対象になりそうです。

すると、全ての回答が全文表示されます。

関連するQ&A