複数のボックスに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同様、私の想定していたとおりの
スクロールバーが表示されました。

カヅサツさん、びさん、ありがとうございました。

一覧へ戻る