CSSについて教えてください。

以下のURLのページ
http://www.home-p-test2.com/ok.html
で、配置したボックスwrapperをページ下部までいっぱいに表示させたいと思っています。切れ目なく右のグレーの背景画像と左右のボーダーを表示したいのです。
上記URLはOKなのですが、中のコンテンツが下に長くなり、スクロールが出ると、IE7のみ、ページに表示されていない部分が
切れてしまいます。(スクロールすると、スクロールして見えてくる下の部分のボーダー線と背景画像が表示されないで消えている)
IE7のみボックスのwrapperがページ全体に広がらないのです。
以下がNGのページです。
http://www.home-p-test2.com/ng.html
IE6,FirefoxはOKなんですが...
なにか単純なコードミスかもしれません...はまってしまいまして...どなたか教えていただけないでしょか?
よろしくお願いします。

回答の条件
  • 1人10回まで
  • 登録:2009/08/07 23:23:51
  • 終了:2009/08/08 16:54:34

ベストアンサー

id:ymch No.1

やちまう回答回数36ベストアンサー獲得回数52009/08/08 08:33:15

ポイント40pt

bodyセレクタのheightプロパティを指定しなければOKなのでは?


body{
	margin: 0;
	padding: 0;
/*	height: 100%;*/
	text-align: center;
	background-color: #FCC
}

コメントアウトしただけで直りました…。

id:moriamko44728

回答ありがとうございます!

お~~そこでしたか.....すいません...単純ミスでしたね。でもIE7だけなぜなんでしょうね??

IE6でチェックをメインにしていたもので見落としていました。

助かりました!!

2009/08/08 13:17:34

その他の回答(1件)

id:ymch No.1

やちまう回答回数36ベストアンサー獲得回数52009/08/08 08:33:15ここでベストアンサー

ポイント40pt

bodyセレクタのheightプロパティを指定しなければOKなのでは?


body{
	margin: 0;
	padding: 0;
/*	height: 100%;*/
	text-align: center;
	background-color: #FCC
}

コメントアウトしただけで直りました…。

id:moriamko44728

回答ありがとうございます!

お~~そこでしたか.....すいません...単純ミスでしたね。でもIE7だけなぜなんでしょうね??

IE6でチェックをメインにしていたもので見落としていました。

助かりました!!

2009/08/08 13:17:34
id:ymch No.2

やちまう回答回数36ベストアンサー獲得回数52009/08/08 14:19:11

ポイント40pt

(↑についての補足です。)


IE7のレンダリングはご存じの通り「標準モード」と「互換モード」がありますが、

標準モードではソースを読み込みながら、DOM要素を外側からレンダリングしているような気がします。(推測)


bodyセレクタを解釈した時点ではBODYタグの“中身”がレンダリングされておらず、

とりあえずの可視部分(つまり、ブラウザのウインドウ範囲)をレンダリング確定(height:100%;)してしまい、

その後でBODYタグの中身がレンダリングされて、要素がはみ出てしまうのではないでしょうか。


DOCTYPE宣言を外して「互換モード」でレンダリングさせると現象が起こりませんので、

IE7の表示モードに起因したもののように思います。

id:moriamko44728

なるほど。。少しすっきりしなかったのですが、ご説明いただいてすっきりしました。

確かに、そう言われて考えて見ますと、納得です。

本当にありがとうございます!!!

2009/08/08 16:53:04

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

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

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

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

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