- 締切済み
ブラウザのサイズを変えたら、divのボックスの高さも合わせて
ブラウザのサイズを変えたら、divのボックスの高さも合わせて 可変できるようにしたいです。 さらに、可変したdivのボックスの高さより内容量が多い場合は ブラウザのスクロールバーのようにCSSのoverflow:autoで スクロールが表示されるようにしたいと考えております。 現時点で、スクロールバーはオリジナルの画像で作成しており、 表示させるのにjScrollPane.jsというJavaScriptを使用しています。 しかし高さが固定されており、カスタマイズしようと思っているのですが なかなかうまくいきません。 どなたか、実現方法をご教授願えますでしょうか。 よろしくお願いいたします。 ※情報不足であれば、追記いたしますのでご指摘お願いいたします。
- tonton99
- お礼率0% (0/4)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
私が験したところ、ご提示の記述とほぼ同じにしましたが、 出来てます。 違うところ ・{reinitialiseOnImageLoad:true}は関係なさそうなので割愛 ・jQueryのバージョンは最新 1.4 ・jquery.em.jsも追加している（関係してるかも？） ・jquery.mousewheel-3.0.2.pack.jsも追加してる（関係ないだろう） ・HTML5にしてる（別にXHTML 1.0 Transitionalでも同じはず） ・あなたの外部"css/style.css"は当然、私のには当然無い といったところです。
- yyr446
- ベストアンサー率65% (870/1330)
No.1です。 jScrollPane.jsはjQueryでしたね。 ↓のようにすればできました。 スクロールさせたい<div id="box"><div>を常にブラウザーのwindowの 30％の高さにしています。 $(function(){ $('#box').jScrollPane({reinitialiseOnImageLoad:true}); $(window).resize(function() { $('#box').jScrollPaneRemove(); $("#box").height(parseInt($(window).height()*0.3)); $('#box').jScrollPane(); }); });
補足
お返事ありがとうございます。 ご教授どおりに設定したつもりが、何かの記述がまちがっているせいか 思うように動作してくれません。 現状は以下のように指定しております。 ブラウザのサイズに変化にあわせ、<div>の高さが変化しない状況です。 表示領域にあわせスクロールバーの表示非表示も制御したいのですが・・・ すみません。jQuery初心者のため、ご迷惑お掛けしますが 何卒、よろしくお願いいたします。 ■html <!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"> <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 name="description" content="" /> <meta name="keywords" content="" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/jScrollPane.js"></script> <script type="text/javascript"> $(function(){ $(".scroll-pane").jScrollPane({reinitialiseOnImageLoad:true}); $(window).resize(function() { $(".scroll-pane").jScrollPaneRemove(); $(".scroll-pane").height(parseInt($(window).height()*0.8)); $(".scroll-pane").jScrollPane(); }); }); </script> </head> <body> <div class="scroll-pane"> ほげほげ </div> </body> </html> ■style.css .scroll-pane { width: 341px; overflow: auto; padding-right: 10px; padding-bottom: 20px; } .jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; } .jScrollPaneDrag { position: absolute; background: url(../images/ball.png) no-repeat center top; cursor: pointer; overflow: hidden; }
div の可変の件だけ。 body タグに onresize イベントをバインドして、JavaScript で処理(Window の clientWidth とかを調べて div.style.pixelWidth を変更)等してしまったらどうでしょうか。 http://javascriptist.net/ref/event.onresize.html ブラウザ依存については調べる必要ありそうですが。。。
- yyr446
- ベストアンサー率65% (870/1330)
CSSで、divのボックスのwidthとheightを％単位で指定しておけば、 ブラウザのサイズを変えても、追随しませんか？ スクロールバーはoverflow:autoでブラウザーのスクロールバーを 使った方がよっぽど手間がないですけど.... 暇があったら、jScrollPane.js探してみます。
補足
お返事ありがとうございます。 ％指定したのですが、divのボックスのサイズは追随されず ブラウザのスクールバーが表示されている状況です。 サンプルをダウンロードしたサイトはこちらです↓ http://css-tricks.com/styling-scrollable-areas/ 今回は、スクロールバーをオリジナルなものにするということが 必須なので困っています。 何か、おわかりになることがございましたら よろしくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
補足
詳しいご説明ありがとうございました！ ソースも公開していただき、なんとか希望どおりの動きになりました。 一つだけ、お聞きしたいことがあります。 IE6で確認すると、ブラウザサイズに追随せず一回リロードしてから、表示領域がリサイズされるのですがこれは、解決できるのでしょうか？ 何度も申し訳ございませんが、もし解決方法をご存じであれば、よろしくお願いいたします。