- 締切済み
CSSでoverflowがうまく操作できません。
BINDを使っているのですが、新着情報の所をoverflow設定し、右側にスクロールバーを作りたいのですが、overflowでscroll設定しても、バーが出てこないか、出てきても新着情報の内容が全て表示され、隠れる部分も全て出てきます。しかも、情報を付け足してもひたすら縦に伸びてゆくだけで、意味がない状態になってしまいます。添付した写真のような感じになってしまいます。どのように設定したらよいのでしょうか。
- aosutacom
- お礼率50% (1/2)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数2
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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; }
- play_with_you
- ベストアンサー率37% (112/301)
画像が小さくて意味が分からないけど、heightが設定されてないとか?
関連するQ&A
- CSS)overflow,スクロールについて
独学でホームページをツクッテいる者です。 overflow:scroll;をするとIE以外でうまく表示できません。 Firefoxなどでは、BOXの中の文字がスクロールバーごとBOXの外(右側)に大きくずれてしまいます。 IEですと、きちんとBOXの中に文字も収まり、スクロールバーも表示されます。 ためしにoverflow:scroll;をCSSから消して更新すると、文字はBOXの中に収まります。 FirefoxでもBox内がずれずにスクロールされる方法はないでしょうか?
- ベストアンサー
- CSS
- CSS:overflow要素の印刷について
いつもお世話になってます。 CSSで、縦のoverflow要素を、"scroll"に設定しました。 そこで、画面に表示されているものだけではなく、要素全てを印刷したいのですが(>_<)方法は何かあるのでしょうか?? どなたか教えてください! よろしくお願いします。
- ベストアンサー
- その他(プログラミング・開発)
- overflow:scrollのスクロールバーのデザイン
overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。
- 締切済み
- HTML
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??
- ベストアンサー
- HTML
- Dreamweaverでoverflow画像の位置
DreamweacerCS3です。 表示フレーム幅(1000px)よりも長い画像(2050px)をcssにてoverflow: auto に設定して、はみ出ることなく収めています。 水平スクロールバーをスライドすれば画像を全幅にわたって動かすことができています。 ページを開いたときは常にこの画像はスクロールバーが左端に寄った状態になっていますが、常時見るのは反対の右側なのでスクロールバーを右端に初期設定したいのですが方法がわかりません。ご伝授ください。 cssのプロパティを見ると100くらいのパラメータがあり、それらしきもの(float)を変えてみるのですが思うようになりません。 現在設定しているのはビューウィンドウのサイズ:(1000px, 410px)、overflow:autoのみです。
- ベストアンサー
- ホームページ作成ソフト
- CSSだけで、テーブルにスクロールバーを表示させたいのですが…
CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか? 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- ベストアンサー
- HTML
- overflow:auto; の記述で横スクロールバーが表示される
gooブログでカスタムテンプレートを使用しています。 縦のみにスクロールバーをつけたくて 「overflow:auto;」 の記述をいれました。 Operaとfoxでは縦のみにスクロールバーが表示されます。 ですがIE6だけ、縦にも横にもスクロールバーが表示されます。 どうすれば、IE6でも縦のみのスクロールバー表示になりますか?
- ベストアンサー
- ブログ
- overflowのscrollを自動で移動
CSSでoverflow:scrollと設定したときに表示されるフレームをボタンを作ってこのボタンを押したときに○○px横に自動的にスクロールさせるようなjavascriptはどのように書けばいいのでしょうか??対応ブラウザはIEのみで大丈夫です。
- 締切済み
- JavaScript
- CSSで擬似的にフレームを作りたい
CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか?
- ベストアンサー
- HTML
- scrollbarを左に表示させるのは可能?
こんにちは <div overflow:scroll>でスクロールバーを表示させていますが、これを左側に表示させることって可能なんでしょうか? 教えてください。
- 締切済み
- HTML
お礼
迅速にお答えいただいてありがとうございました。高さ設定していないのに、スクロール出来るわけないですよね。意味が分かりました。ありがとうございました。