- 締切済み
高さを指定せずに子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>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
遅くなりました。 それは文書構造上も変ですから、スタイルシートでも方法がありません。 ・内容の量が変わるコンテンツにoverflowの指定をせずに、それと無関係の要素にoverflowなんて意味的にありえないです。 ・ブラウザは、量やフォントサイズに変わらず画面に極力表示するように求められます。その際にPageDownキーで縦にスクロールは可能なことが前提ですから、親ブロックの縦幅を参照することは%指定以外は出来ません。 また、ご提示のHTMLは、フロートさせている要素(ナビゲーション)はメインのコンテンツの高さに合わされています。これっておかしいです。もし、そうでしたらナビゲーションはメインコンテンツの内部にないとおかしいです。 スタイルシートが以下に高機能でも、文書解析に反していたら不可能です。 ★対策 添付図上は不可能 1)伸縮するコンテンツ自体にサイズを指定してoverflow:autoを指定する。 2)サブコンテンツはそのままにして、親コンテンツの高さを伸縮させ、ナビゲーションはその高さを参照させる の何れかが良いでしょう。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLがワケワカメなのでされたいことが分かりません。HTMLには文書構造しか書かないこと。 HTML5的に書くと <body> <header> <nav></nav> </header> <section> <aside> </aside> </section> <footer> </footer> </body> という文書構造があるとして、全体<body>の高さがウィンドウ高さ、文字数、で動的に変化された内部と言う事ですか、それともサイズ指定で固定と言う事ですか？
補足
わかりづらい例を書いてしまい、申し訳ございません…。 貼り付けたらすぐ再現できるようにと、ごちゃごちゃと書いてしまいました。 >サイズ指定で固定と言う事ですか？ そうで御座います。 イメージで言いますと下記のようになります。 <body> <section> ←高さと幅を固定した、外枠。 <nav> ←高さがページごとに変わる。 </nav> <aside> ←スクロールバーを表示させたいコンテンツ </aside> </section> </body> 申し訳ございません。HTML５を触ったことがない為、間違っていると思いますが、あくまでイメージとして見ていただけたら幸いです。 問題は、<section> 上の <nav> の高さがページごとに変わるため、<section> の高さを固定することができません。 勿論１ページごとに <nav> の高さを計算すれば可能なのですが、それを避ける手立てがないか、という主旨でした。 <section> にはfloatもかけております。 ブロック要素にスクロールバーを表示させるには、高さを規定してやるのがお約束ですが、 「親要素から、ほかの要素の高さを除いた”余りの範囲”にスクロールバーを表示させるんだよ～」ということを、ブラウザーがわかってくれる方法はないのかな、と思って質問をさせていただきました。 さらにややこしくしてしまったら申し訳ございません…。