• 締切済み

高さを指定せずに子divにスクロールバー

お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか? 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか? お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> (「親divの高さ」-「他の要素の高さ」)<「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか?無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>

  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

遅くなりました。  それは文書構造上も変ですから、スタイルシートでも方法がありません。 ・内容の量が変わるコンテンツにoverflowの指定をせずに、それと無関係の要素にoverflowなんて意味的にありえないです。 ・ブラウザは、量やフォントサイズに変わらず画面に極力表示するように求められます。その際にPageDownキーで縦にスクロールは可能なことが前提ですから、親ブロックの縦幅を参照することは%指定以外は出来ません。  また、ご提示のHTMLは、フロートさせている要素(ナビゲーション)はメインのコンテンツの高さに合わされています。これっておかしいです。もし、そうでしたらナビゲーションはメインコンテンツの内部にないとおかしいです。  スタイルシートが以下に高機能でも、文書解析に反していたら不可能です。 ★対策 添付図上は不可能 1)伸縮するコンテンツ自体にサイズを指定してoverflow:autoを指定する。 2)サブコンテンツはそのままにして、親コンテンツの高さを伸縮させ、ナビゲーションはその高さを参照させる  の何れかが良いでしょう。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

HTMLがワケワカメなのでされたいことが分かりません。HTMLには文書構造しか書かないこと。 HTML5的に書くと <body>  <header>   <nav></nav>  </header>  <section>   <aside>   </aside>  </section>  <footer>  </footer> </body> という文書構造があるとして、全体<body>の高さがウィンドウ高さ、文字数、で動的に変化された内部と言う事ですか、それともサイズ指定で固定と言う事ですか?

chuntotto
質問者

補足

わかりづらい例を書いてしまい、申し訳ございません…。 貼り付けたらすぐ再現できるようにと、ごちゃごちゃと書いてしまいました。 >サイズ指定で固定と言う事ですか? そうで御座います。 イメージで言いますと下記のようになります。 <body>   <section> ←高さと幅を固定した、外枠。     <nav> ←高さがページごとに変わる。     </nav>     <aside> ←スクロールバーを表示させたいコンテンツ     </aside>   </section> </body> 申し訳ございません。HTML5を触ったことがない為、間違っていると思いますが、あくまでイメージとして見ていただけたら幸いです。 問題は、<section> 上の <nav> の高さがページごとに変わるため、<section> の高さを固定することができません。 勿論1ページごとに <nav> の高さを計算すれば可能なのですが、それを避ける手立てがないか、という主旨でした。 <section> にはfloatもかけております。 ブロック要素にスクロールバーを表示させるには、高さを規定してやるのがお約束ですが、 「親要素から、ほかの要素の高さを除いた”余りの範囲”にスクロールバーを表示させるんだよ~」ということを、ブラウザーがわかってくれる方法はないのかな、と思って質問をさせていただきました。 さらにややこしくしてしまったら申し訳ございません…。

関連するQ&A

  • 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
  • DIVでスクロールバーを作ったのですが…

    DIVでスクロールバーを作ったのですが… ページが表示された時にスクロールバーの見えない部分(最下位)を表示させるにはどぅしたら良いのでしょうか?? 例:最下位のcccの部分 div.txt { border: solid 1px #808080; /*1pxには線の太さ、その後は色*/ width: 330px; /*横幅*/ height: 135px; /*高さ*/ padding: 0.5em; /*空白の大きさ*/ overflow: auto; /*スクロールバーの出方*/ } <div class="txt"> <p>111</p><br> <p>222</p><br> <p>333</p><br> <p>444</p><br> <p>555</p><br> <p>666</p><br> <p>777</p><br> <p>888</p><br> <p>999</p><br> <p>000</p><br> <p>aaa</p><br> <p>bbb</p><br> <p>ccc</p><br> </div> これは、可能ですか? よろしくお願いします。

  • DIV要素の高さ100%で、スクロールバーを表示させたいです

    ソースは以下のとおりです。 DIV要素をheight:100%にして画面全体に広げるために、色々CSSで設定していましたところ、Firefoxでしたら縦スクロールバーが表示されるのですが、IE6では縦スクロールバーが表示されません。(左カラムの文字はかなり下まで続いています) IEでもスクロールバーが表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:'Georgia', Verdana, Osaka, 'MS P Gothic'; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定*/ #wrapper { width: 1001px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; } body > #wrapper { height:auto; } /*左カラムの設定*/ #left { width: 340px; margin: 0px; float: left; height: 100%; min-height: 100%; background-color:#FF0000; padding-bottom: 32768px; margin-bottom: -32768px; } /*右カラムの設定*/ #right { width: 660px; margin: 0px; float: right; height: 100%; min-height: 100%; border-left-width: 1px; border-left-style: dotted; border-left-color: #000; background-color:#00FF00; padding-bottom: 32768px; margin-bottom: -32768px; } --> </style> </head> <body> <div id="wrapper"> <div id="left"> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> </div> <div id="right"> aaaa </div> </div> </body> </html>

  • スタイルシートでスクロールは可能ですか?

    以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>   <TITLE>Test</TITLE>   <STYLE type="text/css">   #left {    position:absolute;    top: 130px;    left: 100px;    width: 300px; overflow: scroll;   }   #main {    position:absolute;    top: 130px;    left: 400px;   }   #right {    position:absolute;    top: 130px;    left: 700px;   }   #footer {    position:absolute;    bottom: 0px;    left: 100px;   }   </STYLE> </HEAD> <BODY> <div id="left">  left<br/> <br/>  left<br/> </div> <div id="main">  main </div> <div id="right">  right </div> <div id="footer">  footer </div> </BODY> </HTML>

  • firefoxでdivタグの体裁崩れ

    お世話になります。 以下のソースを IEで見るとリスト1、リスト2は同じ内容が表示されます FireFoxで見るとリスト2のlist3が左側につめられて表示されます。 ・これはIE or FireFoxのバグになるのでしょうか? ・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか? 申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト1 <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト2 <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • div#left {width:50%;

    div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか? <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか?

  • CSSでフローとした際の親要素の高さ

    CSSでfloatしたものって、親要素のheightに反映されません?ただ親要素に背景があって、反映されないと凄く困る感じで・・・。 それってどうやって回避すればいいでしょうか? 取りあえず <div style="width:750px;background:url(mainback.gif)"> <div style="float:left;width:300px;">左側</div> <div style="float:right;width:450px;">右側</div> <br style="clear:both;"> </div> のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、 なにか良い逃げ方ってないでしょうか?? ご存知の方、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • スマホで横並びdiv

    お世話になっております。 スマートフォンでdivの横並びをしようとしたのですが、 <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> </head> <body> <div style="height:30px;line-height:30px;width:100%;"> <div style="overflow:hidden;float:left;width:50px;">日付</div> <div style="overflow:hidden;float:left;">本文</div> </div> </body> とした場合、 本文が長いと日付の下に本文が来るようになってしまいます。 本文の末尾が消えてdivが横並びになるようにしたいのですが 良い方法はないでしょうか? よろしくお願いします。 以上です。

    • ベストアンサー
    • CSS
  • divで作成したテキストボックス内の横スクロールバーとバックカラー

    お世話になります。 以下のhtml記述で、 (1)横スクロールバーを消したい(縦はそのまま生かしたい) (2)テキスト内(div内)のバックカラーを変更したい (3)スクロールバーの色を変更したい(無理?) のやり方を教えて頂きたく、どなたかご存知の方、 どうぞよろしくお願いします。 <html> <body> <div style="width: 12em; height: 4em; overflow: scroll;"> <p> <a href="***.htm">TEST 01</a><br> <a href="***.htm">TEST 02</a><br> <a href="***.htm">TEST 03</a><br> </p> </div> </body> </html> 以上

    • ベストアンサー
    • HTML
  • フロートしたボックスのスクロールバー

    メインのフロートボックスに垂直スクロールバーをつけたいのですが、 上手くいきません。 スタイルシートに (メインのボックス↓) .l_main { margin: 0px; padding: 0px; width: 600px; height: 550px; float: right; overflow:auto;(←スクロールバーの要素を記述) } こう記述しているのですが、ページ内容によってものすごく縦長になったり、いらぬ余白が出来たり。 独学の上、CSSの参考サイトからコピペなどして適当にやっているので分かりません。よい方法を教えてください。