- 締切済み
高さの調整
□ヘッダー □サイドバー／□メイン □フッター 上記ように一般的？なレイアウトをCSSで組んだ場合について ＩＥのバグの関係でサイドバーはフロートではなくボジションをアブソリュート指定しています。 この時メインの高さがサイトバーの高さに満たない場合フッターがサイトバーに重なってしまいます。 これを回避する一般的な方法はどのようなものでしょうか。 現在はメイン内の最下部にDIVタグで高さを指定したアジャスターを付けて調整していますがスマートではないと思いますので。 よろしくお願い致します。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- goulan
- ベストアンサー率46% (23/50)
追加で。 書き忘れてましたね；；；すみません。No.4の、ratoaさんのおっしゃる通りです。padding,border は指定しない、・・・というか、padding:0px; 。float も ratoaさんのおっしゃる通りですね。 この辺り私も勉強不足なのですが、経験則で、指定しないよりも、margin,paddingは、0px で指定したほうがいいような・・・。モノによりますが。逆に尋ねたいくらいです；；申し訳ない。 リストだけずれる、というのは私もありません。 余計な書き込み、すみませんです。ひと様のスレッドでごめんなさい・・・です。
IEのバグ対策としては、widthを指定した要素にはpaddingとborderは指定しない。float:leftした要素にmargin:left、float:rightした要素にmargin:rightを指定しない。 この2点を気をつければ、とりあえず大丈夫だと思うんですけどね。少なくとも私は同じようなレイアウトでメニューにリストを使う事はよくありますけど、リストだけずれるという経験はないです。 あと問題があるとすれば、リスト要素はブラウザによってmarginとpaddingの取り方が違う点ですかね。 ol要素やli要素等、一旦marginとpaddingを0にしてから指定し直した方がいいと思います。 ちなみに私は、ブラウザごとの違いをなくす為に、いつも全称セレクタで全てのmarginとpaddingを0にしてます。
- goulan
- ベストアンサー率46% (23/50)
absolute 指定ならば、メインはmarginを使ってらっしゃるのかと思いますが、そのままだと、フッターの位置をどうにか・・・というのはページ毎に調節するしか思い付きません。 ＞IEだけ3ピクセルずれ これのソースを見てないので、絶対とは言えませんが、サイドバーに float 指定、メインに float指定、フッターでクリア指定、でズレを防げます。 配置は違いますが、似たような IEのズレが嫌で、width,float,clearで解決したことがあります。 指定は、body{}だけではなく、htmlの<body> 直下に、<div id="XX">~</div> で、ソース全体をかこいます。div#XX{}, body{}には、width,margin,padding と指定します。勿論、同じサイズです。 これの問題は、全体の widthを指定しなくてはならない、なので、UAのwindow幅次第では float: left;なら右、float: right; なら左、センター寄せなら両側に空白、幅次第では横スクロールがでてくる場合もあります。 私は、width: 640; ～ width: 800px; くらいに収まるよう心掛けてます。１５インチノートで横スクロール、嫌ですから*smile* IE6.0,firefox,Opera8ならば、これでいけます。
xhtml1.1ってことは、冒頭にxml宣言を書いてるってことですよね。 ってことは、IEだとDOCTYPEスイッチが互換モード（Quirksモード）になるので、レイアウトの崩れは、その関係のバグが原因ではないかと思います。 ソースを見てないので詳しい話は出来ませんが、記述の仕方次第で、floatでもレイアウトは可能だと思います。
補足
はい、そうですがHTML4.01標準でも互換でも現象は同様でどうすることもできなかった経緯があります。 自分なりにいろいろ試したのですがどうすることもできませんでした。
- steel_gray
- ベストアンサー率66% (1052/1578)
absoluteで配置したブロックは他のブロックに影響を与える事がありません。 言い換えればフッターがサイドバーの高さを意識して重ならないようにするのは不可能です。 バグなど色々ありますが、やはりblog等はフロートで配置している場合が多いですし、そうした方がいいのではないでしょうか。
補足
はい、本当はフロートにしたいのですがサイトバー内にはリストがありリストに隣接するメインの内容と リストが終わって何もない場所に隣接するメインの内容とに表示上IEだけ3ピクセルずれが生じてしまうので フロートは諦めたしだいです。 このずれはどうしても許せませんでした。XHTML1.1で書いています。
補足
同様のレイアウトは過去に作ったことがありそれなりに知っているつもりです。 その際は問題が生じなかったのですが今回作っているものは幅を100%で指定。 サイドバーの幅を指定しメインの左マージンにサイドバーと同幅を指定することでメインを可変にしています。 これに何か問題があるのかもしれませんね。 結局サイトバーよりメインが低くなるページはサイドバーより高いボックスを作ってその中に入れるようにしようと思います。 そうしたらメインの方が低いページの高さを統一できるので。