複数のボックスにoverflowを設定したい
-
0 名前: ボーハ : 2005/07/01 00:22
- いつも拝見させていただいています。
複数のdivボックスに、下記のようにそれぞれIDを使ってoverflowを設定しています。それぞれのボックスには異なるテキストを入れるのですが、長文の場合には縦スクロールバーが現れるようにしようと考えています。
div#left {
position: absolute;
top: 4;
left: 4;
width: 200;
height: 200;
overflow: auto;
}
div#center {
position: absolute;
top: 4;
left: 206;
width: 200;
height: 200;
overflow: auto;
}
div#right {
position: absolute;
top: 4;
left: 408;
width: 200;
height: 200;
overflow: auto;
}
3つのdivを横に並べて、IE(6.0)とネスケ(7.1)で確認したところ、IEは3つのボックスにそれぞれスクロールバーが現れ、想定した通りに動くのですが、ネスケでは右端のボックスにしかスクロールバーが現れず、左と真中のボックスはスクロールできません。
ネスケでもIEと同じようにそれぞれのボックスを独立して動かしたいのですが、どなたかご教示いただけないでしょうか。よろしくお願いします。
-
1 名前: び : 2005/07/01 00:22
- overflowでautoを指定しても、スクロールバーが出るとは限りません。
スクロールバーをつけたかったら、autoではなくてscrollを指定するとよいです。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html#overflow
-
2 名前: ボーハ : 2005/07/01 00:22
- び さん、ご教示ありがとうございます。
scrollの指定をしてみたところ、横スクロールバーも出ました。
ボックス中のコンテンツには画像などは入れないので横スクロールは必要ないのですが、あるとどうも見栄えがよくないように思います。
やはり無理なのでしょうか・・・。
-
3 名前: カヅサツ : 2005/07/01 00:22 [URL]
- > top: 4;
> left: 4;
> width: 200;
> height: 200;
top: 4px;
left: 4px;
width: 200px;
height: 200px;
0以外の場合、単位は必須です。
-
4 名前: び : 2005/07/01 00:22
- では、一歩戻った方法と、一歩進んだ方法を。
overflow:autoでスクロールバーが出ないのは、
スクロールする必要があるほどの中身が無いからだと思います。
<div style="overflow:auto;width:10em;height:10em;">
<p>ヘ長調ね。</p>
</div>
例えばこのぐらい中身が少なければ、まぁ
スクロールする必要は生じないでしょう。
ですので、スクロールバーを出したければ中身を増やすとよいでしょう。
ダサい方法だと思いますが……。
overflow-x, overflow-yを使うという方法もあります。
これらを使えば、overflowの指定の効果を
横方向や縦方向に限定させることができます。
これはIEの独自拡張プロパティです。
でも、CSS3のワーキングドラフトに含まれましたし、
http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-overflow-x
Firefox 1.1では先行実装されそうです。
まぁWDである以上時期尚早なので、おすすめできません。
……と思ったけど、単位のつけ忘れのことを見落としていました。
まずはこれを改善してみてください。
-
5 名前: ボーハ : 2005/07/01 00:22
- カヅサツさん
ご指摘ありがとうございます。
単位が必須であることを知りませんでした。勉強になります。
早速単位をつけて確認してみます。
びさん
いろいろとご指導ありがとうございます。
まずは単位が欠落しているところを修正してみます。
-
6 名前: カヅサツ : 2005/07/01 00:22 [URL]
- 誤解を招きそうなので一応
> 0以外の場合、単位は必須です。
もちろん必須でない、というか、単位の有無で解釈が変わるプロパティもあります。
line-height: 1.4px;
line-height: 1.4em;
line-height: 1.4;
-
7 名前: ボーハ : 2005/07/01 00:22
- カヅサツさん
pxの単位をつけたところ、overflow:autoで
NetscapeでもIE同様、私の想定していたとおりの
スクロールバーが表示されました。
カヅサツさん、びさん、ありがとうございました。