- ベストアンサー
cssでの高さの調整がうまくいかない
- CSSで高さの調整が上手くいかない場合、wrapperの背景を白にしてコンテンツ部を白くする方法を試していますが、maincontentsの情報量が増えるとwrapperの枠を飛び出してしまいます。
- 各ページの情報量に応じてwrapperの高さも自動で広がるようにしたいのですが、現在のCSS設定ではcontentsの高さまでしか広がらず、上手くいっていません。
- CSSの設定を修正すると、maincontentsの情報量に関係なくwrapperの高さが自動で広がるようになりますが、具体的な修正方法はわかりません。どのようにすれば良いでしょうか？
- hotrod7020
- お礼率41% (65/155)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
お礼メールを見てからの回答。回答するのは簡単ですが、 まず、今現状どうなっているのか把握すること。（原因の追及） これがわからなければ今後も苦労しますよ！ ※ 一旦、背景色とコンテンツの背景色を指定しdiv毎の枠線を指定。 IEが正規解釈しないから変な事になっている。Firefox で確認する事。 --------------------------- body{ background:#999;} div{ border:1px solid blue;} --------------------------- 一旦、こうすれば、#maincontentsと#sidenaviが float で左右に分かれてるのがハッキリわかります。隙間もあるようです。 float をするということは、上に上げる事。 なので、下の物が全て上がっている状態になると考えておく。 下になっている場合は、単に、上に幅があって落ちて見えているだけと考えておけば納得できる。 よって float を止める部分から clear で解除してやる事。 解除方法は、その下のブロック要素に clear を指定。 {clear:both } とかを下のブロックにCSSで割り当てるか、 <br style="clear:both"> や <hr style="clear:both"> <div style="clear:both"></div> の空要素でも出来る事はできる。 つまり <div id="sidenavi"> id "sidenavi" の内容がここに入ります</div> の下に更にdivで枠を作って clear してコンテントを設定するか、 <br style="clear:both"> を一旦入れてやって解除しておくとか。
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
auto でどうしたいのかな・・・ float したら clear すれば良い。 って意味じゃなくて？
お礼
naokitaさん、早速のご回答有難うございます。 良く理解できてないのですが、maincontentsで情報量がページによって異なるので、autoにしておけばいいのかなと思いそうしております。 また、どこをclearにすればいいのでしょうか。 もしくはこれ以外にやりかたありましたらお答え頂ける範囲で構いませんので、大変お手数かけますが、よろしくお願い致します。 ちなみにIE6では思い通り表示されますが、Firefox 3.0でこの症状がでるようです。
お礼
naokita様 早速のご回答有難うございます。 頂いた説明ではっきりと理解できました。今日ずっと悩んでいたので、頭の中がすっきりしました！ 本当に親切に有難うございました。