Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。
以下、記述したCSSとHTMLです。
HTML---------
<body>
<div id="main">
<h1>height100%のボックス</h1>
<p>
標準準拠のIEやfirefoxでbody直下にheight100%のボックス
</p>
・・・略 <h1>height100%のボックス</h1>
<p>
標準準拠のIEやfirefoxでbody直下にheight100%のボックス
</p>
・・・略
</div>
</body>
</html>
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
No.1ベストアンサー
- 回答日時:
win版safariでは反応しております。
macについては、safariは1.2以前ではmin-heightプロパティをサポートしていません。なので1.2以前を使用していないでしょうか?
http://developer.apple.com/internet/safari/safar …
(上記)
なので、結局min-heightは無効となって、heightは一度100%指定しているが次のセレクタでauto指定を上書き
しているので結局100%とならないことになります。
それとwinIEも6まではmin-heightに対応していませんが、同時にbody > #mainセレクタも無効なので結果的に
100%となっているだけですね。
なお、body > #mainセレクタは必要なのでしょうか?
まぁやってはいけないというわけではありませんが、あまりスマートなソースでは無い様に見受けられます^^;
これとっちゃえばsafariでも狙い通りになるかと思います。
以上です。
参考URL:http://developer.apple.com/internet/safari/safar …
お礼が遅くなり申し訳ございません。ご回答ありがとうございました。
min-heightは、Operaの為、body > #mainはFirefoxの為必要としております。IEやSarafiのためのものではございません(Operaに関しては特にどうでもいいのですが、念のため程度で・・・・)。
ちなみに、body > #mainを削除してしまうと、Firefoxでレイアウトがくずれしまいますのでこれはこれで必要としております。
また、Safariのバージョンは最新を使っております。
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_xsl1 …
再度ご回答ありがとうございます!
win版safari3はまだ試したこともないのですが、min(max)-heightに関しては無くてもいいな・・・と思っているものなので、削除の方向で試していこうと思います。
現時点ではまだSafariは確認必須ブラウザになっていないので、自己満足で確認用としてつかっているのですが、近々Safariも対象になりそうです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
divで囲まれたpaddingの指定を...
-
スタイルシートで背景の繰り返...
-
CSS:印刷時のレイアウト崩れに...
-
Media Queries 4 で 非推奨とな...
-
余分な縦スクロールバーが出て...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
スクロールボックスを中央に配...
-
CSS3で角丸写真にシャドーを付...
-
Safariでheight:100%のボックス...
-
ウェブページの上下に暗幕を表...
-
Firefoxで一番下のstickyが上に...
-
複数行テキストの内の文章にリンク
-
<li>の黒い点を消したい。
-
CSS(0の単位)について
-
CSSで指定した背景画像にリンク...
-
border-style:solidで文字がずれる
-
CSSで左に画像、右にテキストを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報