HTML/CSS overflow:scroll についての質問


以下のソースで、
左下灰色のボックスのスクロールバーが有効で、
ウィンドウ右端のスクロールバーが表示されないものを期待していますがうまくいきません。
overflow: scroll; が働いていないように思うのですが......

ご教授願います。

<style>
*{ margin: 0;padding: 0;border: 0; }
html, body { height: 100%; }
#a {
background-color: #555555;
width: 250px;
float: left;
height: 100%;
}
#b {
background-color: #222222;
height: 100%;
}
#c {
overflow:scroll;
}
#n {
background-color: #FFFFFF;
height: 260px;
}
</style>
<body>
<div id="a">
<div id="n"></div>
<div id="c">
1<br>2<br>3<br>4<br>5<br>1<br>2<br>3<br>4<br>5<br>
1<br>2<br>3<br>4<br>5<br>1<br>2<br>3<br>4<br>5<br>
1<br>2<br>3<br>4<br>5<br>1<br>2<br>3<br>4<br>5<br>
1<br>2<br>3<br>4<br>5<br>1<br>2<br>3<br>4<br>5<br>
1<br>2<br>3<br>4<br>5<br>1<br>2<br>3<br>4<br>5<br>
</div></div>
<div id="b"></div>
</body>

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2011/03/29 10:05:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:y-kawaz No.1

回答回数1422ベストアンサー獲得回数226

ポイント60pt

overflow:scroll; を効かせるには height の指定が必要です。

対応としては以下の3つくらいが考えられます。

  1. #n の高さ固定を諦めて、#n{height:30%;} #c{height:70%;} のようにする。
  2. 画面がリサイズされるのに合わせて #c の style.height を固定値で変更するJavascriptを記述する。
  3. divをやめてテーブルを使う。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません