- ベストアンサー
div入れ子によるheight100%
- div入れ子によるheight100%の問題について説明します。
- 問題の原因はIE6、IE7、FF2、Safariでの検証ブラウザにあります。
- 入れ子のdivが縦100%にならないため、解決方法を教えてください。
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 勘違いだったらすみません。もしもdivを3重にしているのが背景のためなら多分下のでいけると思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <title>test</title> <style type="text/css"> <!-- html { height:100%; } body { height:100%; margin:0; padding:0; text-align:center; background:url(イメージ名.jpg) center repeat-y; } #contents { width:400px; margin-left:auto; margin-right:auto; text-align:left; } --> </style> </head> <body> <div id="contents"> テスト <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> テスト </div> </body> </html> これで横500px、縦1pxとかで画像を用意して、ソースのイメージ名のところをその画像名にしてやればいけるとおもいます。 (上だと拡張子がjpgになってます)
その他の回答 (7)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは No.6です ＞レイアウトの中央配置という訳ではないのです。 こちらこそ語弊を生むような回答をしてしまって申し訳ないｍ（－－）ｍ text-alignとoverflowは気になったので付け加えただけですので・・・ メインは背景色100％の方です（－－；） とりあえずOperaでスクロールの出た状態からスクロールのなくなる高さまで拡げたらスクロールバーが残ってしまうという問題点は残ってますがIE6,Firefox,Operaでは背景色100％できてますけど、そちらではどうですかね？
お礼
度々のご回答をありがとうございます。 下でも書かせて頂いたのですが、 ブラウザの縦100%の表示自体は問題ないのですが、 コンテンツが多く画面を下へスクロールした場合、 背景が途切れてしまう問題がでてしまうのです。 （この症状はIE7、FF2、Safariです。Opera未確認） ▼スクロール前 http://www.geocities.jp/ajax3210/01.gif ▼スクロール後 http://www.geocities.jp/ajax3210/02.gif ちなみに、コンテンツ部の最下部が分かりやすいように 最下部に「テスト」の文字を入れました。 ▼HTML <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> テスト </div> </div> </div> </body> ※みなさんの回答で、表示的に縦100%がクリアしていますので、 この問題は新しくトピックスをたてなおした方がいいかもしれませんね。。。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは IE6,Firefox2,Operaしか持っていないのでIE7,Safariでは未確認ですが・・・ こういうことですか？ IE6では左に配置されたままだったのでbodyにtext-align:centerつけて contentsにtext-align:leftつけてます あと縦スクロールつけるそうなのでcontentsにoverflow:autoをつけてます Operaでは高さの狭いところから拡げるとちょっと縦スクロールが出たままになりますけど・・・ <style type="text/css"> <!-- html { height:100%; } body { height:100%; margin:0; padding:0; text-align:center;} #wrapper { background: #99CC00; width:500px; margin-left:auto; margin-right:auto; min-height:100%; height: 100%; } #wrapper-inner { background:#CCFF00; width:450px; margin-left:auto; margin-right:auto; min-height:100%; height: 100%; } #contents { background: #FFFFCC; width:400px; margin-left:auto; margin-right:auto; min-height:100%; text-align:left; height: 100%; overflow:auto; } --> </style>
お礼
ご回答ありがとうございます。 >こういうことですか？ >IE6では左に配置されたままだったのでbodyにtext-align:centerつけて >contentsにtext-align:leftつけてます いえ、#wrapperの縦100%の背景色はうまく表示されているのですが、 その中にある#wrapper-innerや#contentsが、縦100%の背景色が出ない（途中で途切れている）という事です。 なので、レイアウトの中央配置という訳ではないのです。 質問内容が言葉足らずですみません。。 引き続き、ご回答をお待ちしております。
- steel_gray
- ベストアンサー率66% (1052/1578)
#2のお礼にあった問題点を勘違いしていました。 全然解決してませんでしたね。失礼しました。 この問題の解決策はわからないです。
お礼
ご回答ありがとうございます。 まだ未解決なので、引き続き回答をお待ちしております。 よろしくお願いいたします。
- steel_gray
- ベストアンサー率66% (1052/1578)
#wrapperA だけでなく #wrapper-left も #wrapper-inner に修正してます。念のため。
お礼
度々のご回答をありがとうございます。 こちらの記述ミスでお手数をおかけしております。 ご指摘のCSSを修正しても同じ症状ですね。困りました。。。 ちなみに、ご指摘の「* html 」はスターハックというCSSハックを利用しています。 min-heightはFirefoxなどのモダンなブラウザには対応していますが、 IEが未対応な為、スターハックでheightを行いました。
- steel_gray
- ベストアンサー率66% (1052/1578)
* html #wrapper { height: 100%; } * html #wrapper-left { height: 100%; } * html #wrapperA { height: 100%; } これを #wrapper { height: 100%; } #wrapper-inner { height: 100%; } #contents { height: 100%; } このように修正すると大丈夫だと思います。 (SafariはMacないんで確認してませんが) html要素は最上位ですから * html という書き方は間違いです。(なんかのcssハックでしたっけ？？)
お礼
ご回答ありがとうございます。 上のご回答に合わせてコメントさせて頂きますね。
- steel_gray
- ベストアンサー率66% (1052/1578)
まず、#contentsの内容の高さが計算されます。 heightはautoですのでmin-heightを処理しますが、%指定されていますので 包含ブロック(#wrapper-inner)のheightを参照しますが #wrapper-innerには「heightが明示されていない※」ので、 #contentsのmin-heightはautoとして扱われ、内容にあわせた高さになります。 同様に#wrapper-innerの高さもautoに。 #wrapperの高さを計算する段になって、初めて包含ブロック(body)の高さが明示されているので、100%になります。 ※ http://www.y-adagio.com/public/standards/tr_css2/visudet.html#min-max-heights パーセントは生成されるボックスの包含ブロックの高さに関して計算される。包含ブロックの高さが明示的に指定されない場合，すなわち，内容の高さに依存する場合は，パーセント値は'auto'と同様に解釈される。 とりあえず全部height:100%にしてはだめなんですか？？
お礼
ご回答ありがとうございます。 #wrapper、#wrapper-inner、#contentsに height:100%を追加した所、うまく表示はされるのですが一点問題がありました。 ▼問題点 ブラウザの高さを縮め縦スクロールバーが出る状態にし（コンテンツが長い場合を想定）、下へスクロールすると背景色が途切れてしまいます。 IE7、FF2、Safariでこの現象がおこります。 どうにか解決したいと思いますので、 どうぞよろしくお願いいたします。 ※「* html #wrapperA」は、「* html #contents」でしたね。
margin-top margin-bottom padding-top padding-bottom をそれぞれ(0とかに)指定しておくとどうなる？
お礼
ご回答ありがとうございます。 margin:0; padding:0; をそれぞれに入れても変化なしですね。 SAYKAさまの方ではうまく表示されましたでしょうか？
お礼
ご回答ありがとうござます。 bodyに背景画像の場合、下記アドレスの様な1pxのずれが生じるため、 div入れ子の中央寄せ、縦100%を試行錯誤しております。 http://okwave.jp/qa2832295.html