ブラウザのサイズを変えたら、divのボックスの高さも合わせて

締切済

質問者：tonton99
質問日時：2010/08/24 21:34
回答数：4件

ブラウザのサイズを変えたら、divのボックスの高さも合わせて
可変できるようにしたいです。

さらに、可変したdivのボックスの高さより内容量が多い場合は
ブラウザのスクロールバーのようにCSSのoverflow:autoで
スクロールが表示されるようにしたいと考えております。

現時点で、スクロールバーはオリジナルの画像で作成しており、
表示させるのにjScrollPane.jsというJavaScriptを使用しています。
しかし高さが固定されており、カスタマイズしようと思っているのですが
なかなかうまくいきません。

どなたか、実現方法をご教授願えますでしょうか。
よろしくお願いいたします。

※情報不足であれば、追記いたしますのでご指摘お願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.1

回答者： yyr446
回答日時：2010/08/25 11:28

CSSで、divのボックスのwidthとheightを％単位で指定しておけば、

ブラウザのサイズを変えても、追随しませんか？

スクロールバーはoverflow:autoでブラウザーのスクロールバーを
使った方がよっぽど手間がないですけど....

暇があったら、jScrollPane.js探してみます。

この回答への補足

お返事ありがとうございます。

％指定したのですが、divのボックスのサイズは追随されず
ブラウザのスクールバーが表示されている状況です。

サンプルをダウンロードしたサイトはこちらです↓
http://css-tricks.com/styling-scrollable-areas/

今回は、スクロールバーをオリジナルなものにするということが
必須なので困っています。

何か、おわかりになることがございましたら
よろしくお願いいたします。

補足日時：2010/08/25 15:04

通報する

- 0
- 件

通報する

No.2

回答者： edp3142
回答日時：2010/08/25 15:26

div の可変の件だけ。

body タグに onresize イベントをバインドして、JavaScript で処理(Window の clientWidth とかを調べて div.style.pixelWidth を変更)等してしまったらどうでしょうか。

http://javascriptist.net/ref/event.onresize.html

ブラウザ依存については調べる必要ありそうですが。。。

- 0
- 件

通報する

No.3

回答者： yyr446
回答日時：2010/08/26 13:46

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-transitio …
<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;
}

補足日時：2010/08/26 20:13

通報する

- 0
- 件

通報する

No.4

回答者： yyr446
回答日時：2010/08/27 10:19

私が験したところ、ご提示の記述とほぼ同じにしましたが、

出来てます。

違うところ
・{reinitialiseOnImageLoad:true}は関係なさそうなので割愛
・jQueryのバージョンは最新　1.4
・jquery.em.jsも追加している（関係してるかも？）
・jquery.mousewheel-3.0.2.pack.jsも追加してる（関係ないだろう）
・HTML5にしてる（別にXHTML 1.0 Transitionalでも同じはず）
・あなたの外部"css/style.css"は当然、私のには当然無い

といったところです。

この回答への補足

詳しいご説明ありがとうございました！
ソースも公開していただき、なんとか希望どおりの動きになりました。

一つだけ、お聞きしたいことがあります。
IE6で確認すると、ブラウザサイズに追随せず一回リロードしてから、表示領域がリサイズされるのですがこれは、解決できるのでしょうか？

何度も申し訳ございませんが、もし解決方法をご存じであれば、よろしくお願いいたします。

補足日時：2010/08/27 19:49

通報する