CSSでoverflowがうまく操作できません。

質問

BINDを使っているのですが、新着情報の所をoverflow設定し、右側にスクロールバーを作りたいのですが、overflowでscroll設定しても、バーが出てこないか、出てきても新着情報の内容が全て表示され、隠れる部分も全て出てきます。しかも、情報を付け足してもひたすら縦に伸びてゆくだけで、意味がない状態になってしまいます。添付した写真のような感じになってしまいます。どのように設定したらよいのでしょうか。

回答No.2

ORUKA1951

blockは、デフォルトでheight:の値はauto、(overflowの値はvisible)です。高さを指定してはじめてoverflowのhidden,scrollなどが利いてきます。
　⇒11.1.1 はみ出し: 'overflow'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visufx.html#overflow )
　⇒10.5 内容の高さ: 'height'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#the-height-property )

★タブは＿に置換してあるので戻す。

[HTML4.01]
<div class="section">
＿<h2>見出し</h2>
＿<div class="article" id="news">
＿＿<h3>HTMl5の新しい要素</h3>
＿＿<dl>
＿＿＿<dt>section</dt>
＿＿＿<dd>文書やアプリケーションにおける一般的なセクションを表します。h1, h2, h3, h4, h5, h6 要素と共に使用することで、文書構造を表すことができます。</dd>
＿＿＿<dt>article</dt>
＿＿＿<dd>ブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示します。</dd>
＿＿＿<dt>aside</dt>
＿＿＿<dd>ページ内にあるその他の内容と、少ししか関係していないものを表します。</dd>
＿＿＿<dt>hgroup</dt>
＿＿＿<dd>セクションの見出しを表します。</dd>
＿＿＿<dt>header</dt>
＿＿＿<dd>導入部やナビゲーションをグループ化します。</dd>
＿＿＿<dt>footer</dt>
＿＿＿<dd>セクションのフッタを表します。フッタには作者に関する情報や、著作権情報などを含められます。</dd>
＿＿＿<dt>nav</dt>
＿＿＿<dd>ナビゲーションとなるセクションを表します。</dd>
＿＿＿<dt>figure</dt>
＿＿＿<dd>本文から単独で参照されることの多い、自己完結した内容を表します。</dd>
＿＿</dl>
＿</div>
</div>
{CSS]
div#news{
border:inset 3px blue;
padding:10px;
width:400px;margin:0 auto;
height:300px;
position:relative;
}
div#news dl{
position:relative;margin:0;
top:-10px;left:10px;
height:290px;
overflow:auto;
padding-top:30px;
}
div#news h3{
margin:0;padding:5px 10px;
width:370px;
position:absolute;top:0;
background-color:white;
z-index:10;}

[HTML5]
<section>
＿<h2>見出し</h2>
＿<article id="news">
＿＿<h3>HTMl5の新しい要素</h3>
＿＿<dl>
＿＿＿<dt>section</dt>
＿＿＿<dd>文書やアプリケーションにおける一般的なセクションを表します。h1, h2, h3, h4, h5, h6 要素と共に使用することで、文書構造を表すことができます。</dd>
＿＿＿<dt>article</dt>
＿＿＿<dd>ブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示します。</dd>
＿＿＿<dt>aside</dt>
＿＿＿<dd>ページ内にあるその他の内容と、少ししか関係していないものを表します。</dd>
＿＿＿<dt>hgroup</dt>
＿＿＿<dd>セクションの見出しを表します。</dd>
＿＿＿<dt>header</dt>
＿＿＿<dd>導入部やナビゲーションをグループ化します。</dd>
＿＿＿<dt>footer</dt>
＿＿＿<dd>セクションのフッタを表します。フッタには作者に関する情報や、著作権情報などを含められます。</dd>
＿＿＿<dt>nav</dt>
＿＿＿<dd>ナビゲーションとなるセクションを表します。</dd>
＿＿＿<dt>figure</dt>
＿＿＿<dd>本文から単独で参照されることの多い、自己完結した内容を表します。</dd>
＿＿</dl>
＿</article>
</section>
[CSS]
article#news{
border:inset 3px blue;
padding:10px;
width:400px;margin:0 auto;
height:300px;
position:relative;
}
article#news dl{
position:relative;margin:0;
top:-10px;left:10px;
height:290px;
overflow:auto;
padding-top:30px;
}
article#news h3{
margin:0;padding:5px 10px;
width:370px;
position:absolute;top:0;
background-color:white;
z-index:10;
}

article#news{
border:inset 3px blue;
padding:10px;
width:400px;margin:0 auto;
height:300px;
position:relative;
}
article#news dl{
position:relative;margin:0;
top:-10px;left:10px;
height:290px;
overflow:auto;
padding-top:30px;
}
article#news h3{
margin:0;padding:5px 10px;
width:370px;
position:absolute;top:0;
background-color:white;
z-index:10;
}

お礼

迅速にお答えいただいてありがとうございました。高さ設定していないのに、スクロール出来るわけないですよね。意味が分かりました。ありがとうございました。

回答No.1

play_with_you

画像が小さくて意味が分からないけど、heightが設定されてないとか？