人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
}

●質問者: rukineko
●カテゴリ:ウェブ制作
✍キーワード:background-image BODY border CSS firefox
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● Marine-Blue
●25ポイント

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

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

◎質問者からの返答

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

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

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

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

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

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


2 ● makoohira
●40ポイント ベストアンサー

コピーして、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%;

}

◎質問者からの返答

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

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

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

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

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

追記:

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

なんででしょうね^^;

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

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


3 ● wizemperor
●5ポイント

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

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

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

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

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

◎質問者からの返答

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

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


4 ● KUROX
●20ポイント

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

すが・・・・。

◎質問者からの返答

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

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


5 ● Marine-Blue
●20ポイント

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

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

navigator.systemLanguage - IE系

navigator.vendorSub - Gecko系

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

window.opera - Opera

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ