height100%のボックスを作成し背景画像を設置し、MacIE5.1・5.2でプレビューすると余計な余白がページ下部にできてしまいます。

こちら、何をどうやってもなくすことができず困っております。
何卒お助け下さい(涙)

--HTML---

<body>
<div id="main">
<h1>height100%のボックス</h1>
<p>
標準準拠のIEやfirefoxでbody直下にheight100%のボックス
</p>
・・・略
</div>
</body>


--CSS--

html{
height:100%;
}
body{
height:100%;
width:80%;
margin:0px auto;
}
div#main{
background-image:url(../images/contents_bg.gif);
border:solid 1px #760014;
border-width:0px 1px;
height:100%;
min-height: 100%;
}
body > #main {
height: auto;
}

回答の条件
  • 1人2回まで
  • 登録:2007/07/26 17:45:28
  • 終了:2007/07/31 20:32:59

ベストアンサー

id:makoohira No.2

makoohira回答回数136ベストアンサー獲得回数42007/07/26 23:28:14

ポイント40pt

コピーして、Mac_IE5.0で表示してみたら確かにバグってますが、

変な記述をコメントアウトしたら普通に表示しました。なぜ入れてたのか疑問です。

http://oh.skr.jp/web/test/mac_ie50.png

あと、省略されてますが、h1のmargin-topは0にしてるか、

あるいは、#mainの上にborder,paddingのいずれかが入っているはずです。

これらが無いと、marginの重なりで外ボックスのmarginとして扱われます。

firefoxでは、htmlの仕様通りに#mainにh1のmarginが出て、#mainのheightが、100% + h1のmargin-top分になり、スクロールバーが出るはずです。

参照 http://q.hatena.ne.jp/1184199423


<要らないもの消したcss>

body{

width:80%;

margin:0px auto;

}

h1{

margin:0;

}

div#main{

background-image:url(../images/contents_bg.gif);

border:solid 1px #760014;

border-width:0px 1px;

height:100%;

}

id:rukineko

ご記入いただきましたCSSで、他のブラウザ検証いたしましたが、FireFoxで閲覧すると背景の高さが100%でなくなってしまいました。

html・bodyのheight:100%;およびheight: auto; はFireFoxで正しく表示させるためには必要だと思います。

先ほどから試行錯誤していたのですが、ハックをhtml{}に使ってMacIE5を排除してみたら、希望通りの状態になりました!!

参考で頂いたCSSの状態をなんとかMacだけに・・・と検討した結果です。ありがとうございます。

あとはSafariへの対応も考えないと・・。

追記:

別の日に同じものを作ってプレビューしたのですが、なぜか作成していただいた通りのものが出来ず、振り出しに戻ってしまいました(汗)

なんででしょうね^^;

同じソースを書いたのですが・・・。

もうしばらく検討しようと思います。

2007/07/31 20:30:17

その他の回答(4件)

id:Marine-Blue No.1

Marine-Blue回答回数237ベストアンサー獲得回数122007/07/26 21:39:35

ポイント25pt

どうもツールバー領域の高さも含んで計算されるようですが、試してみたところFirefoxなどGecko系のブラウザでも同じ現象が起こったから正常な挙動だと思われます。

http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

id:rukineko

いいえ、Firefoxでは余計な余白は出ておりません。

参考にMacの余白の状態のスクリーンショットを記載します。

http://www.horakhty.info/~ec-pato/mac.jpg

スクロールバーが出て、必要以上にページが伸びております。

http://www.horakhty.info/~ec-pato/ff.jpg

こちらFirefox。スクロールバーは出ず、希望通りの姿になっております。

2007/07/26 22:17:38
id:makoohira No.2

makoohira回答回数136ベストアンサー獲得回数42007/07/26 23:28:14ここでベストアンサー

ポイント40pt

コピーして、Mac_IE5.0で表示してみたら確かにバグってますが、

変な記述をコメントアウトしたら普通に表示しました。なぜ入れてたのか疑問です。

http://oh.skr.jp/web/test/mac_ie50.png

あと、省略されてますが、h1のmargin-topは0にしてるか、

あるいは、#mainの上にborder,paddingのいずれかが入っているはずです。

これらが無いと、marginの重なりで外ボックスのmarginとして扱われます。

firefoxでは、htmlの仕様通りに#mainにh1のmarginが出て、#mainのheightが、100% + h1のmargin-top分になり、スクロールバーが出るはずです。

参照 http://q.hatena.ne.jp/1184199423


<要らないもの消したcss>

body{

width:80%;

margin:0px auto;

}

h1{

margin:0;

}

div#main{

background-image:url(../images/contents_bg.gif);

border:solid 1px #760014;

border-width:0px 1px;

height:100%;

}

id:rukineko

ご記入いただきましたCSSで、他のブラウザ検証いたしましたが、FireFoxで閲覧すると背景の高さが100%でなくなってしまいました。

html・bodyのheight:100%;およびheight: auto; はFireFoxで正しく表示させるためには必要だと思います。

先ほどから試行錯誤していたのですが、ハックをhtml{}に使ってMacIE5を排除してみたら、希望通りの状態になりました!!

参考で頂いたCSSの状態をなんとかMacだけに・・・と検討した結果です。ありがとうございます。

あとはSafariへの対応も考えないと・・。

追記:

別の日に同じものを作ってプレビューしたのですが、なぜか作成していただいた通りのものが出来ず、振り出しに戻ってしまいました(汗)

なんででしょうね^^;

同じソースを書いたのですが・・・。

もうしばらく検討しようと思います。

2007/07/31 20:30:17
id:wizemperor No.3

wizemperor回答回数379ベストアンサー獲得回数522007/07/27 01:37:00

ポイント5pt

今どき、MacIEは対応するだけ労力の無駄だと思いますが…。

html要素とbody要素などのmarginとpaddingは0にしていますか?

ブラウザのデフォルトスタイルが適用されているとかはないですか?

基本的にhtml要素の扱いはUAによる差が大きいので、

だめならMacIEはあきらめるか、body要素にするか、JavaScriptなどを利用したほうがいいと思います。

id:rukineko

残念ながら個人のホームページを作っているのではないので、私の一存ではMacIEを排除することは出来ません。

また、企業様は新しいブラウザの使用を禁止しているところもございますので、古いからといって切り捨てることはできないのが現状です。

2007/07/27 09:17:36
id:KUROX No.4

KUROX回答回数3542ベストアンサー獲得回数1402007/07/27 10:13:39

ポイント20pt

JavaScriptを使って、UA(ユーザーエージェント:ブラウザのこと)を判別して、CSSを切り替えると言う方法もありま

すが・・・・。

id:rukineko

スクリプトの件は検討中です。

CSSの枚数が増えると管理がしにくくなるので、できれば避けたいのですが、最終的には必要かな・・とも思います。

2007/07/31 20:25:50
id:Marine-Blue No.5

Marine-Blue回答回数237ベストアンサー獲得回数122007/07/31 12:24:22

ポイント20pt

UA判定やると泡沫切捨てになって嫌がられる気が…。

オブジェクト判定のほうが精度は高いと思いますよ。

navigator.systemLanguage - IE系

navigator.vendorSub - Gecko系

navigator.vendorがApple Computer, Inc - SafariなどのAppleWebKit系

window.opera - Opera

id:rukineko

なるほど、そういう判定方法もあるんですねー。

この機会に勉強してみます。

2007/07/31 20:26:35

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません