containerの背景画像を常に画面下まで表示させたい

[新着] Webテンプレートを仮オープンしました

0   名前： クーリエ ： 2007/03/20（火） 09:29  ID:wlw.r9jt sub-Cl
こんにちは。
初めて質問させていただきます。

下記のような（簡単にしてありますが）構成でページを制作しています。

<html>
<head>
<title>あああ</title>
</head>

<body>
<div id="container">

<div id="menu">いいい</div>
<div id="main">ううう</div>
<div id="footer">えええ</div>

</div>
</body>
</html>

bodyに右寄せ・縦方向リピートの背景画像を設定していますが、
それとは別に左端にもラインを常に表示させたいと考えています。

最初はcontainerにbackground-imageを設定しましたが、
コンテンツが少なく縦に短いページの場合、コンテンツがある部分までしか表示されません。
そこでhtml,bodyとcontainerをheight:100%とすると
画面いっぱいに表示できうまくいったと思っておりましたが、
100%とは最初に表示されるウインドウサイズでの可視領域に対しての割合のようで、
ウインドウの伸縮には対応できるのですが、
ページをスクロールさせると最初の表示領域より下は背景がなくなってしまいました。
これをbodyにおける背景のように、どんな場合も常に表示されるようにはできないでしょうか。

関連のありそうな質問もいくつかあったのですが、解決には至りませんでした。
特にこちらの質問はいけるかと思い試してみたのですが、うまくいきませんでした。
<html>に対する、表示に関する設定が良くわからないのですが、これは可能なのでしょうか？
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=284

どうぞよろしくお願いいたします。
1   名前： とおりすがり ： 2007/03/20（火） 09:29  ID:UWsZexeD sub-gm
containerに overflow:auto; を付け足す。
http://www.tagindex.com/stylesheet/box/overflow.html
2   名前： クーリエ ： 2007/03/20（火） 09:29  ID:wlw.r9jt sub-Cl
レスありがとうございます。
overflowはMacIEで良くおかしくなるので毛嫌いしており今回も失念しておりました…。
ですが、autoだとスクロールバーが表示されるのでは？
早速containerにoverflow:autoを指定して、ウインドウサイズをコンテンツより狭めてリロードしてみたところ、やはりmainがカラム落ちし、スクロールバー（ブラウザウインドウとは別の）が表示されました。

今回の問題に直接関係するかはわかりませんが、
実はcontainer内のmenuとmainは2カラムの段組になっております。
情報を小出しにして申し訳ありません。

visibleならどうだろうと思い試してみましたが、こちらは全く変化が見られませんでした。
3   名前： 匿名 ： 2007/03/20（火） 09:29  ID:IwTTDztO sub-Ds
標準モードなら、htmlとbodyに別々の背景を普通に、指定できます。
過去互換なら、だめですが、モードによっては簡単に解決できるかも。

宣言の情報がないので、もし、よければご参考になさって下さい。
4   名前： クーリエ ： 2007/03/20（火） 09:29  ID:O5TbAIWk sub-9g
レスありがとうございます。
また情報不足で…申し訳ありません。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1行目にxml宣言、2行目にURL有りのTransitionalなdoc宣言を入れています。

htmlに背景を指定出来るんですね。初めて知りました。
ちょっと調べれば出てきました。勉強不足ですね…
↓この辺ですよね
http://www.lucky-bag.com/archives/2005/02/htmlbody.html

しかし最初の質問時に引用したURLの質問「背景画像を左右のみ表示したい」
を見てhtmlへの背景画像の指定は一応試してみたんですが、そのときはうまくいきませんでした。
htmlに指定した背景画像はコンテンツが終わった部分から下からしか表示されなかったです。
コンテンツ部分は何故だか真っ白になってました。
WinIE6.0以外は標準準拠モードになるはずなのですが、Firefoxなどモダンブラウザでもだめでした。

もしかして私のやり方がおかしかったのかも？
今材料が手元にないので、月曜日また試してみます。
5   名前： クーリエ ： 2007/03/20（火） 09:29  ID:enhPIPq8 sub-Cl
本日上記の方法を試してみました。

やはりうまくいかないようです。
htmlに最背面の背景画像・bodyにラインとなる画像を指定したところ、
Firefox2.0、Opera9などのモダンブラウザでは、htmlに指定した方はいわゆる背景画像として一番下まで表示されましたが、bodyに指定した方は当初containerに指定していたように、最初のウインドウサイズを広げると画像が切れました。
WinIE6.0ではどちらもきちんと下まで表示され、（下位互換モードにも関わらず）理想の挙動を返しました。
WinIE5.x〜4ではhtmlへの指定が効かないようで、htmlに指定したものは反映されず。（背景真っ白
）
MacIE5.1ではこれまた理想の挙動を返しました。

どうも自分が使い方を良く分かっていないだけかもしれないんですが、なかなかうまくいきそうにないので、今回はラインの表示はあきらめようと思います。
cssにはいつも悩まされてばかりです。もっと精進しないと…
ご回答くださった方、ありがとうございました。
6   名前： 匿名 ： 2007/03/20（火） 09:29  ID:w1fWVxKv sub-Ds
WinIE5.x〜4ではhtmlへの指定が効かないようで、htmlに指定したものは反映されず。……

これ、過去互換というより、過去そのものです。いくら標準を指定してやっても……。
未来のモードに対応できるわけはなく。この子達に合わせるためのモードが過去互換なのです。

それにしても、うらやましい環境ですね。詳しいレポート有難うございました。
7   名前： クーリエ ： 2007/03/20（火） 09:29  ID:quSv2QqW sub-Cl
少し時間が経ってしまいましたが、その後いろいろ調べた結果
思うような表示が得られたのでご報告を。

http://css-happylife.com/log/css-template/000028.shtml

この記事によると、カラムをfloatで浮かせることによって、
内包しているcontainerの実際の高さが0になることが原因のようでした。

早速containerにもfloatを指定してみると、今度はコンテンツの高さ分までしか
表示されなくなってしまったので、min-height: 100%と、
IE系のためにスターハックでheight: 100%;を追加したところ、
Opera以外のブラウザでは、スクロール時もウインドウサイズ変更時も
画面いっぱいの表示が可能となりました。
（MacIE5.1(OS9)では何故か背景が100%以上に下に伸びてしまいますが）

Operaはウインドウサイズにcontainerの高さが収まっているときはいいが、ロード時のウインドウサイズよりcontainerの高さが大きいとき、ウインドウをリサイズしてcontainerの高さよりサイズを広げるとcontainerの高さ以降は背景が切れてしまいました。

Operaはほとんどターゲットブラウザには入っていないので、今回はこれで納得したいと思います。
時間はかかってしまいましたが勉強になりました。

＞匿名さん
WinIEのバージョン違いのことでしたら、Multiple Explorersでお手軽に過去のバージョンが使えますよ。
8   名前： 匿名 ： 2007/03/20（火） 09:29  ID:Uy/0c8wp sub-Ds
Win のみ所有者が Mac で挙動を知りたいときはどうすれば？静的だと、サイトがあるのですが、hoverとかの挙動も知りたいとなると、なかなか。

すいません。何度かレスしたのですが、なぜか蹴られているのでキーワードだけ

floatfix ってハックをご存知ですか？
9   名前： クーリエ ： 2007/03/20（火） 09:29  ID:kWa1x1yP sub-Cl
＞匿名さん
スレ違いになってしまいますので手短に…
動的にチェックするのはさすがに不可能ではないでしょうか？
Intel MacでしたらParallels Desktopなどありますし、
WindowsにもMacエミュレーターのようなものがあるかもしれません。
（詳細はわかりませんが）

「Floatfix」は今回の件に関係有るのでしょうか？
ググってみましたが英文ページしかヒットせず良く分かりませんが
ハックというほどのものでもなさそうな気がします。
http://www.cssplay.co.uk/boxes/floatfix.html
10   名前： 匿名 ： 2007/03/20（火） 09:29  ID:ZJ6rjdk7 sub-Ds
ごめんなさい、間違えました
clearfixハック

関係あると思うけど、ないかな？
11   名前： クーリエ ： 2007/03/20（火） 09:29  ID:H1AFAgYC sub-Cl
clearfixでしたら、関係有るかもしれません。
ですが、新たに不具合が出るとちょっと困るので、
今回はひとまず現状維持で。また勉強したいと思います。
アドバイスありがとうございます。
一覧へ戻る