余分な縦スクロールバーが出てしまう

Question

CSSを外部ファイル、本文はXHTML1.0でページを作っています。


#headerと#containerで上下に分かれるデザインです。
#headerはwidth: 100%;で横いっぱいに伸びており、#containerは幅800pxでセンタリング、ドロップシャドウの背景画像がheight: 100%;で下いっぱいに伸びるようにしています。

#headerは上手くいっており問題はないのですが、#containerがどうしてもうまく行きません。
height: 100%;で背景画像は下まで伸びるのですが、本文がどんなに短くても、200px位？縦スクロールバーが必ず出てしまうのです。
本文が長くても、確実にブラウザに収まる程短くても結果は同じです。
（1920*1200のディスプレイで全画面表示しても同じ結果なので、余白が反映されている訳ではないと思います）

余分な縦スクロールバーが出てしまう原因には何がありますか？


確認ブラウザはSafari/3.2.1  Firefox/3.0.7です。
原因がお分かりになる方、ご教授お願い致します。

abril · Accepted Answer

ANo.1,4です。補足を拝見しました。 > z-indexは何度か試してみたのですが、思い通りの配置になってくれず、悩んでいました。条件（環境）によって解釈が違う事があり、ちょっとやっかいな場合もありますね。 > コンテンツがブラウザの表示領域より長い場合、height: 100%;が反映されてないみたいです。 > 元々のブラウザの大きさだけ、背景画像がリピートされています。失礼しました、コンテンツ量が短い状態のみばかり着目して検証してしまいました。その通りですね… しかも、前回のサンプルだとIE6ではコンテンツがウィンドウの表示領域より長くなっても何故かスクロールバーが発生しないという重大な不具合がある事にも気付かせて頂きました（汗） > height: 100%;なのに、どうしてなのでしょう？ "height: 100%;"だから…とも。横に比べて縦方向の調整は色々とやっかいな点があるので。 > （

には何も置いてなく、CSSで背景画像を設定しているだけです。（そうでしたか。内容がない要素を置くのはあまり推奨されないのですが…） > これはサイトカラー変更時に楽が出来たら、という理由での作成だったのでいくらでも変更可能なのですが、（省略） > もうこれは細かな問題ですので、難しい場合はスルーして下さって構いません。それでしたら、そこはそのまま目をつむっていだけると助かります。このブロックが、幅が800pxで決め打ち・左右センタリングというスタイルである限り、headerの様にcontainerの外に出すのは（今回のトラブルの原因を解消するという目的の場合には）ちょっと障害になってしまう様に思えます。containerの外に出せればheaderと同様に"position: absolute;"による調整で何とかなりそうなんですが… ということで、その構成のまま、不具合を修正（一部難あり、後述）してみました。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- サンプル ver.2

コンテンツ先頭部分～スクロールが発生する様な長いコンテンツ～コンテンツ最後部分

---------------------------------------------------------------------- 【CSS】「※」は前回からの変更箇所 ---------------------------------------------------------------------- @charset "Shift_JIS"; （省略） #header { position: absolute; _position: relative;※IE6対策。"position: absolute;"のままだとスクロールができなくなるので。 top: 0; left: 0; width: 100%; height: 35px; z-index: 1; background: #9c9; } #container { position: relative; width: 800px; height: 100%; min-height: 100%;※これを指定する事でコンテンツ量に対する背景の不具合を解消。 margin: 0 auto; background: url(../img/container/back.png) repeat-y; z-index: 0; } body > #container {※この指定を丸ごと追加することで、コンテンツの量に対する背景の不具合を解消。 height: auto; margin-bottom: -15px; } #containerTop { position: absolute; top: 35px; _top: 0;※IE6対策。親要素で"position: relative;"の方が適用されている為。 left: 0; width: 800px; height: 15px; margin: 0 auto; background: url(../img/container/back_top.png) no-repeat #fcc; z-index: 2;※このコンテナも重なる様に変更したので、重ね合わせの順番を指定。 } #mainContainer { position: relative; width: 750px; margin: 0 auto; padding: 70px 0px 0px;※各コンテナの表示位置指定・重ね合わせを変更した頃により、上からの高さ（空き）をpadding-topに含めて調整。 _padding-top: 35px;※IE6対策。親要素で"position: relative;"の方が適用されている為、計算する値が異なる。 z-index: 1;※このコンテナも重なる様に変更したので、重ね合わせの順番を指定。 background: #ccf; } ---------------------------------------------------------------------- これでとりあえず、Fierfox2/3、Safari3、IE7等では・コンテンツのボリュームに左右されず、背景が画面下まで伸び、且つ余分な縦スクロールも発生しない、という状態になる様なのですが、IE6は残念ながら"position: relative;"を使用している為にheaderの高さ分が加算されてしまい、常に余分な縦スクロールが出てしまいます。難あり、というのはこの為です。更なる打開策を思いつけたらまたチャレンジさせて頂くかもしれませんが。

abril · Answer

ANo.1です。再検証してみました。containerTopをcontainerに入れて差し支えないなら、positionをあれこれすることで何とかなりそうです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- サンプル

コンテンツ部分

---------------------------------------------------------------------- 【CSS】※領域が分かり易い様に各ブロックに仮の背景色を指定してあります。また、headerの高さを仮に35pxとして計算してあります。 ---------------------------------------------------------------------- @charset "Shift_JIS"; （省略） #header { position: absolute; top: 0; left: 0; width: 100%; height: 35px; z-index: 1; background: #cfc; } #container { position: relative; width: 800px; height: 100%; margin: 0 auto; background: url(../img/container/back.png) repeat-y; z-index: 0; } #containerTop { position: absolute; top: 35px; left: 0; width: 800px; height: 15px; margin: 0 auto; background: url(../img/container/back_top.png) no-repeat #fcc; } #mainContainer { position: relative; top: 50px; width: 750px; margin: 0 auto; padding: 20px 0px 0px; background: #ccf; } ---------------------------------------------------------------------- 上記で、IE6/7、Firefox2/3、Safari3等でほぼ同様の表示結果を得られております。不具合ある様でしたら補足して下さい。

noname#83877 · Answer

#mainContainerのpadding-topにheaderとcontainerTopの高さ分の値を追加して、headerとcontainerTopをposition:absolute;で設定する方法はどうでしょうか。

abril · Answer

containerの高さが100%なのに対して、containerの外にcontainerTopが15pxのheightで存在する為、その15px分常にウィンドウ全体の高さにプラスされてしまいその分の領域にスクロールバーが出ている様です。

containerTopに関しては、おそらくデザイン上もcontainerの子要素としてマークアップしても構わない様になっているのではないかと思いますので、それで解決します。

が、今回ソースには詳細は記載されていませんが、containerの外には更にheaderが存在しており、これのデザインが横100%となっている以上containerの子要素とできない為、headerの分の高さは必ずまたcontainerの外にプラスされてしまい、その分だけ常にスクロールバーが出る事になります。
「本文がどんなに短くても、200px位？縦スクロールバーが必ず出てしまう」というのは、つまり現状ではheaderの高さ＋containerTopの高さがそれぐらいなのだという事でしょう。

この場合、headerのデザインにも依るのですが、解決策として：

・headerの高さをパーセンテージで指定し、その分の値をcontainerから引く。
例えば、#header { height: 10%; }なら、#container { height: 90%; }とする。
・headerのデザインを変更してcontainerの子要素にできる様にする。

今日はあまり時間がないのでこれ以上詳しい検証ができないのですが、何かもっと上手い案を思いついたら改めて回答させて頂きます。
※他の回答者様がより適切なお答えを出しましたらこのままスルーさせて頂きます。

abril · Answer

質問文に提供されている情報だけは、原因の特定は難しいです。
肝心のCSSファイルのソースと(X)HTMLファイルのレイアウトの大枠部分のソースを抜粋してを公開して下さい。おそらく、

> #containerは幅800pxでセンタリング、ドロップシャドウの背景画像がheight: 100%;で下いっぱいに伸びるようにしています。

この#containerの指定そのものや、その周辺の要素の兼ね合いで不具合が起きていると思われますので。

> 本文はXHTML1.0でページを作っています。

Strict？Transitioinal？また、XML宣言の有無は？

> 確認ブラウザはSafari/3.2.1 Firefox/3.0.7です。

IE6/7ではスクロールは出ないのですか？それとも同じ現象が起きますか？

余分な縦スクロールバーが出てしまう

ANo.1,4です。

ANo.1です。

この回答への補足

#mainContainerのpadding-topにheaderとcontainerTopの高さ分の値を追加して、headerとcontainerTopをposition:absolute;で設定する方法はどうでしょうか。

containerの高さが100%なのに対して、containerの外にcontainerTopが15pxのheightで存在する為、その15px分常にウィンドウ全体の高さにプラスされてしまいその分の領域にスクロールバーが出ている様です。

質問文に提供されている情報だけは、原因の特定は難しいです。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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