- 締切済み
ブラウザのサイズを変えたら、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/ 今回は、スクロールバーをオリジナルなものにするということが 必須なので困っています。 何か、おわかりになることがございましたら よろしくお願いいたします。
関連するQ&A
- ブラウザの表示領域から高さを指定、ブラウザを動かしても可変させたい。
ブラウザの表示領域から高さを指定、ブラウザを動かしても可変させたい。 ブラウザのスクロールバーのように、 ブラウザの表示領域を取得してdivのボックスのサイズを取得して、 それに合わせてボックスの高さを指定し、 overflow:autoでスクロールバーが出るようにしたいと考えております。 サイズの取得までは.clientHeightを使ってできたのですが、 表示後にブラウザを動かすと合わせて可変するようにすることができず困っております。 上記を実現する方法がおわかりの方がいらっしゃれば、 是非ご教授いただければと思います。
- ベストアンサー
- JavaScript
- DIV 領域内でのオートスクロール
当方はプログラミングやJavascriptなどにはとても疎く、サンプルなどは色々あるのですが、どのように改良すれば良いのかわかりません。 HTMLでWEBのページを作成しているのですが、下記の条件があります。 ・表示領域が600×300 ・ブラウザ標準スクロールバー使用禁止 ・<iframe>使用禁止 <body> ～～～ <div style="overflow:hidden;"> ここの部分だけJavascriptでオートスクロール </div> ～～～ </body> 駄文で申し訳ないですが、どなたかご回答願います。
- ベストアンサー
- JavaScript
- IE7の<div>のバグ
IE7でgooglemapの表示がおかしくなります。 <div id=～>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id～>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。
- 締切済み
- HTML
- divの横幅 自動調整
PHP + MySQL +html + CSS で動的テーブルを表示するサイトを制作しています。 <div id="○○○"> <table></table> </div> といったように、中のテーブルをdivで囲ってコーディングしています。 外側をdivで囲い横幅を指定してあげて、テーブルに横スクロールバーを表示させているのですが、divで指定した横幅よりもテーブルの横幅が短くなった場合、外のdivの幅がテーブルに合わせて短くならないのですが、このような場合、何か対処法はございますでしょうか。 superTable.jsを使用しており、このjsの使用がテーブルの外側にdivをおき、cssを使ってdiv側にスクロールバーを表示される仕様になっております。 以上、よろしくお願い致します。
- ベストアンサー
- CSS
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？
- ベストアンサー
- HTML
- IE6のブラウザで、<div>に設定した背景画像が固定されない事で悩ん
IE6のブラウザで、<div>に設定した背景画像が固定されない事で悩んでいます。 <body>と<div>にそれぞれ背景を設定しているのですが、<div>に設定した背景だけが、 縦のスクロールバーと一緒にスクロールしてしまいます。 背景自体はCSSで下記のように設定しています。 background:url("./hoge.gif") no-repeat fixed center top; <body>も同じ設定で背景を表示させているのですが、こちらは問題なく固定表示になっています。 <div>などのボックス要素では固定表示させることは無理なのでしょうか？ どうぞ知恵をお貸しください。
- ベストアンサー
- その他（プログラミング・開発）
- 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
- ブラウザのスクロールバーの長さを制御
ブラウザのスクロールバーの制御をしたいのですが、 いい方法が見つかりません。 たとえば、縦の長さ800pxある画像を表示させたときに 500pxまではブラウザのスクロールバーを非表示にさせ、 500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。 この時、例えばブラウザウィンドウの縦幅を480pxにした場合は 差分の20px分のみのスクロールバーが出てきてほしいのですが、 単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、 800px分のスクロールバーが出てしまうのです。 ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。 何かいい方法があればご教授ください
- 締切済み
- CSS
- テキストボックスの高さを可変とし、ある高さ以上でスクロールバーを出したい
テキストボックスの高さを可変とし、ある高さ以上でスクロールバーを出したい 以下のように ＿＿＿＿＿＿＿＿ ｜コメント。 ｜ ｜ ｜ ---------------- ↓ ＿＿＿＿＿＿＿＿ ｜コメント。 ｜ ｜コメント。 ｜ ｜コメント。 ｜ ｜コメント。 ｜ ｜コメント。 ｜ ｜コメント。 ｜ ---------------- ↓ ＿＿＿＿＿＿＿＿ ｜コメント。 ∥ ｜コメント。 ∥ ｜コメント。 ∥ ｜コメント。 ∥ ｜コメント。 ∥ ｜コメント。 ∥ ---------------- ∥スクロールバー cssの{overflow: auto;} でスクロール可視の自動設定はできますが、この ばあい高さが固定されてしまいます。高さを設定しないと、 外枠に設定した高さ＝この枠の高さとなってしまいます。 そうではなく、ミニマムの高さ、マックスの高さを設定してスクロールバーを 自動表示させるようにするにはなにか方法はないでしょうか？ お知恵をお貸しください。よろしくお願いします。
- ベストアンサー
- HTML
- <div style="overflow">でこんなことは出来ませんか？
<div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
補足
詳しいご説明ありがとうございました！ ソースも公開していただき、なんとか希望どおりの動きになりました。 一つだけ、お聞きしたいことがあります。 IE6で確認すると、ブラウザサイズに追随せず一回リロードしてから、表示領域がリサイズされるのですがこれは、解決できるのでしょうか？ 何度も申し訳ございませんが、もし解決方法をご存じであれば、よろしくお願いいたします。