映画のエンドロール観る派？観ない派？

IEとFirefoxでは、position:fixedのせいでボックスレイアウトが違う

解決済

  • 質問者：yenalie
  • 質問日時：
  • 回答数：1件

IE(6,7)とFirefox(2.0.0.14)で検証しながらページを作成しています。
（OSはWinXP, モニタ解像度は1024x768です。）

下記ソースをIEで開くと希望通りの表示になるのですが、Firefoxではメニューブロックと本文ブロックが重なってしまいます。
メニューブロックに設定した position:fixed を削除すると、両ブロックがIEと同様に並んでくれるのですが、画面をスクロールしてもメニューを固定表示させたいので諦めきれません。

SEO対策のため、本文ブロックを先に記述してfloat:rightで右に表示し、左側にメニューブロックを回り込ませるようにしているのですが、そのあたりのやり方も何か間違っているのでしょうか？

有識者の皆様のご指南よろしくお願いいたします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html{height : 100%;}

body{margin : 0;
padding : 0;
height : 100%;
background : gray;}

#container
{margin : 0 auto;
width : 80%;
height : 100%;
min-height : 100%;
background : white;}

body > #container
{height: auto;}

#menu{position : fixed;
margin : 0;
width : 29%;
height : 100%;
min-height : 100%;
background : yellow;
filter : alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}

#contents_wrapper
{float : right;
margin : 0;
width : 70%;
height : 100%;
min-height : 100%;
background : pink;}
</style>
</head>
<body>
<div id="container">
<div id="contents_wrapper">
本文エリア
</div>
<div id="menu">
メニューエリア
</div>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

通常、何かのブロックに幅や高さを%で指定した場合には親のブロッ


クの内辺を100%として考えますよね。でも、CSSの規定では、「固定
配置のブロックは、親ブロックじゃなくて閲覧領域を100%として考
える」のが正しいんです。なにしろ固定配置ってのは、親兄弟から
切り離して閲覧領域に対して固定して配置されるんですから。

というわけで、IEの表示が間違い。ていうかIE6ってposition:fixed
に対応してないはず。固定されてないんじゃないかな。
    • good
    • 0
    • 件
通報する
この回答へのお礼

IE６では表示固定されないのは諦めてたのですが、幅が違ってしまうのだけが気になってました。
でも、幅のことも含めて「IE6はposition:fixedに非対応」と考える方がいいですね。
この件については、メニューブロックをIE７／Firefoxに最適なwidth:24%で幅調整して、IE６でメニューブロックと本文ブロックの隙間が開いてしまうのは仕方なしということにします。
ご教示ありがとうございました！

通報する
お礼日時：2008/05/21 14:12

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報