- ベストアンサー
余分な縦スクロールバーが出てしまう
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です。 原因がお分かりになる方、ご教授お願い致します。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1,4です。補足を拝見しました。 > z-indexは何度か試してみたのですが、思い通りの配置になってくれず、悩んでいました。 条件（環境）によって解釈が違う事があり、ちょっとやっかいな場合もありますね。 > コンテンツがブラウザの表示領域より長い場合、height: 100%;が反映されてないみたいです。 > 元々のブラウザの大きさだけ、背景画像がリピートされています。 失礼しました、コンテンツ量が短い状態のみばかり着目して検証してしまいました。その通りですね… しかも、前回のサンプルだとIE6ではコンテンツがウィンドウの表示領域より長くなっても何故かスクロールバーが発生しないという重大な不具合がある事にも気付かせて頂きました（汗） > height: 100%;なのに、どうしてなのでしょう？ "height: 100%;"だから…とも。横に比べて縦方向の調整は色々とやっかいな点があるので。 > （<div id="containerTop">には何も置いてなく、CSSで背景画像を設定しているだけです。 （そうでしたか。内容がない要素を置くのはあまり推奨されないのですが…） > これはサイトカラー変更時に楽が出来たら、という理由での作成だったのでいくらでも変更可能なのですが、 （省略） > もうこれは細かな問題ですので、難しい場合はスルーして下さって構いません。 それでしたら、そこはそのまま目をつむっていだけると助かります。このブロックが、幅が800pxで決め打ち・左右センタリングというスタイルである限り、headerの様にcontainerの外に出すのは（今回のトラブルの原因を解消するという目的の場合には）ちょっと障害になってしまう様に思えます。containerの外に出せればheaderと同様に"position: absolute;"による調整で何とかなりそうなんですが… ということで、その構成のまま、不具合を修正（一部難あり、後述）してみました。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="css/Import3.css" media="screen" /> <title>サンプル ver.2</title> </head> <body class="top"> <div id="header"> ヘッダー </div> <div id="container"> <div id="containerTop"><!-- ただの画像です --></div> <div id="mainContainer"> コンテンツ先頭部分 ～スクロールが発生する様な長いコンテンツ～ コンテンツ最後部分 </div> </div> </body> </html> ---------------------------------------------------------------------- 【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の高さ分が加算されてしまい、常に余分な縦スクロールが出てしまいます。難あり、というのはこの為です。 更なる打開策を思いつけたらまたチャレンジさせて頂くかもしれませんが。
その他の回答 (4)
- abril
- ベストアンサー率69% (388/560)
ANo.1です。再検証してみました。containerTopをcontainerに入れて差し支えないなら、positionをあれこれすることで何とかなりそうです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="css/Import.css" media="screen" /> <title>サンプル</title> </head> <body class="top"> <div id="header"> ヘッダー </div> <div id="container"> <div id="containerTop"><!-- ここには実際にW800×H15以内img要素が入るのでしょうか？ --></div> <div id="mainContainer"> コンテンツ部分 </div> </div> </body> </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等でほぼ同様の表示結果を得られております。 不具合ある様でしたら補足して下さい。
補足
お返事が遅くなってしまいすみません。 こんなやり方もあったのですね！ z-indexは何度か試してみたのですが、思い通りの配置になってくれず、悩んでいました。 ですが、コンテンツがブラウザの表示領域より長い場合、height: 100%;が反映されてないみたいです。 元々のブラウザの大きさだけ、背景画像がリピートされています。 mainContainerを削除しコンテンツをcontainerに置いて、paddingで位置を調整してみましたが、解決しないようでした。 height: 100%;なのに、どうしてなのでしょう？ （<div id="containerTop">には何も置いてなく、CSSで背景画像を設定しているだけです。 これはサイトカラー変更時に楽が出来たら、という理由での作成だったのでいくらでも変更可能なのですが、ドロップシャドウのアルファチャンネル付きpngでした。bodyの背景画像が透けるようになっています。 <div id="container">中に入る事で、containerの背景のアルファチャンネル付きpngと重なってしまうのです。 ですがこれを解決しようとすると振り出しに戻ってしまいますし、もうこれは細かな問題ですので、難しい場合はスルーして下さって構いません。）
#mainContainerのpadding-topにheaderとcontainerTopの高さ分の値を追加して、headerとcontainerTopをposition:absolute;で設定する方法はどうでしょうか。
お礼
ご回答どうも有り難うございます。 試してみましたが、全体的に表示が崩れてしまいました。 header内が複雑なので、そこに何か問題があるのかもしれません。 ですが、他のデザイン作成時に、いつかヒントになりそうです。 勉強になりました。どうも有り難うございます！
- abril
- ベストアンサー率69% (388/560)
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の子要素にできる様にする。 今日はあまり時間がないのでこれ以上詳しい検証ができないのですが、何かもっと上手い案を思いついたら改めて回答させて頂きます。 ※他の回答者様がより適切なお答えを出しましたらこのままスルーさせて頂きます。
お礼
ご回答どうも有り難うございます。 まさしく仰っている通りの問題のようです！ height: 100%;にどんどん足されているのですね。もの凄く納得致しました。 （確かにheader＋containerTop分スクロールされているのです） headerをパーセンテージで指定するのが一番自然だとも思うのですが、キッチリと中身をデザインしてしまっています…。 今回のデザインは諦めて作り直してしまうか、余分なスクロールを放置するかの2択でしょうか。 お忙しい中、お時間を割いていただき本当に有り難うございます。 自身でも解決できないかと、似たような事例を扱っている書籍やサイトを調べているのですが、なかなか思うようにいきません。 もう暫くは締め切らずに開けておこうと思います。よろしくお願い致します。
- abril
- ベストアンサー率69% (388/560)
質問文に提供されている情報だけは、原因の特定は難しいです。 肝心のCSSファイルのソースと(X)HTMLファイルのレイアウトの大枠部分のソースを抜粋してを公開して下さい。おそらく、 > #containerは幅800pxでセンタリング、ドロップシャドウの背景画像がheight: 100%;で下いっぱいに伸びるようにしています。 この#containerの指定そのものや、その周辺の要素の兼ね合いで不具合が起きていると思われますので。 > 本文はXHTML1.0でページを作っています。 Strict？Transitioinal？また、XML宣言の有無は？ > 確認ブラウザはSafari/3.2.1 Firefox/3.0.7です。 IE6/7ではスクロールは出ないのですか？それとも同じ現象が起きますか？
補足
ご回答どうも有り難うございます。 ソースが長いので躊躇しておりました。以下の通りです。 XHTML↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="css/Import.css" media="screen" /> <title>XXX</title> </head> <body class="top"> <div id="header"> <!-- ヘッダ（省略） --> </div> <div id="containerTop"><!-- ただの画像です --> </div> <div id="container"><!-- ここに背景画像があります --> <div id="mainContainer"> <!-- コンテンツ部分（省略） --> </div> </div> </body> </html> CSS↓ リセットスタイル↓ @charset "Shift_JIS"; html,body,div, dl,dt,dd, h1,h2,h3,h4,h5,h6, pre,form,fieldset,input,textarea, blockquote,th,td { margin: 0; padding: 0; } htmlとbodyへの指定↓ html, body { height: 100%; } コンテナ部分↓ #containerTop { width: 800px; height: 15px; margin: 0 auto; background: url(../img/container/back_top.png) no-repeat; } #container { width: 800px; height: 100%; margin: 0 auto; background: url(../img/container/back.png) repeat-y; } #mainContainer { width: 750px; margin: 0 auto; padding: 20px 0px 0px; } 上記の部分に問題があるのだと思います。 >IE6/7ではスクロールは出ないのですか？それとも同じ現象が起きますか？ Macで作業していたので、IEに気が回っていませんでした。 IEは7しか持っていないのですが、確認した所同じように表示されているようです。
お礼
ご回答有り難うございます。 小さな疑問にもお答えいただいて、とても勉強になりました。 解説も沢山つけていただいて、有り難うございます。分かり易いです。 提示していただいたソースを元に、自分が管理しやすくなるようにデザインを変更してみました。 お答えいただいて、単純には実現しにくいデザインを1つ覚えることが出来ました。もっとシンプルな物で、きちんと勉強し直してみます。 教えていただいた事を、これからのサイト制作時にも応用していこうと思います。 <div id="containerTop">には、説明をつけて不可視化してみる事にします。 IE6対策もとても参考になりました。 多くのブラウザに対応させるのは難しいですね。場合によっては、IE8.js等の導入も検討しようかと思っています。 希望がほぼ実現できて、とても嬉しいです。 お忙しい中、お時間を割いていただいて本当に有り難うございました！