人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: _nakamine
●カテゴリ:ウェブ制作
✍キーワード:background-color BODY border CSS HTML
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● y-kawaz
●60ポイント ベストアンサー

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

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

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


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ