ブラウザの表示領域から高さを指定、ブラウザを動かしても可変させたい。

Question

ブラウザのスクロールバーのように、
ブラウザの表示領域を取得してdivのボックスのサイズを取得して、
それに合わせてボックスの高さを指定し、
overflow:autoでスクロールバーが出るようにしたいと考えております。
サイズの取得までは.clientHeightを使ってできたのですが、
表示後にブラウザを動かすと合わせて可変するようにすることができず困っております。

上記を実現する方法がおわかりの方がいらっしゃれば、
是非ご教授いただければと思います。

fujillin · Accepted Answer

No1です。ご提示のコード（No1の補足）では、単に以下のようなCSSを作成しているだけです。　　 ○○の部分は数字で、document.allがある場合（IE）はbodyの高さ、そうでない場合でモダンブラウザならinnerHeightが入ることになります。後半がいきなりinnerHeightになっているので、対象が何か不明です。（なんだかおかしいですね） innerHTMLは通常は属性なのでそのもととなる要素があるはずなのですが、ご提示のコードではそれがありません。（withで指定？）あるいは、考えにくいことですが、innerHTMLをローカル変数に使っているとするならどこかで値を代入しているはずで、その部分が提示されていないので不明です。さらに言うなら、その場合分け自体がすでに古い場合分けの方法なので、現状にあっているのか少々疑問です。＞今回jScrollPane.jsというjavascriptでスクロールバーをカスタマイズしており、＞上記方法では最初のサイズで固定されてしまい、ご提示のコードだと「○○px」と数値で指定していますので、ご質問の通り固定サイズになっています。 No2様が示されているように、%指定などの相対指定にしておけば、リサイズされても相対的に変化してくれるので、何もしなくてもOKということになります。ただし、　.hoge { height:100%; } とした場合、該当する要素がどのように構成されているかによって、実際のサイズが決まるので、ご提示の情報だけからではわかりません。でも、相対指定を利用することで解決できる可能性はありそうですね。 No1で説明した方法ですと、同じルーチンを再実行するのではうまくいきません。（回答時に、document.writeを使っているなんて予想していなかったので）正攻法でいくならリサイズイベントが発生した時に、スタイルシートを取得して、.hogeの記述を探し、あったらその内容を変更するという少々面倒な処理を追加することになります。それよりはclass="hoge"の要素（スクリプトで生成される要素？）が都度生成されるものではなく、常に決まっているのであれば、そちらのスタイルを直接変更してしまったほうが簡単です。要素が可変（後で生成されるなど）の場合はスタイルシートを変更するしかないかも。いずれにしろ、CSSだけで解決できるのなら、そのほうが遥かに簡単です。

think49 · Answer

横から失礼します。 #1の補足より。 > このようなコードに追記する場合どのように書けばうまく反映されますでしょうか… そもそも、CSSだけで実現できる内容なのではないでしょうか…。 --------- HTML5

test

---------

fujillin · Answer

＞表示後にブラウザを動かすと合わせて可変するようにすることができず～
というのは、ブラウザのサイズを変えた場合という意味でしょうか？

ブラウザのサイズ変更時はonresizeイベントで捉えることが可能ですので、これを利用して再計算するようにしておけばよいのでは？
　http://www.openspc2.org/JavaScript/reference4/event/onResize/index.html

確認していませんが、確か、イベントは実際にサイズ変更前に発生したような記憶がありますので、ちょっとだけタイムラグを置いてサイズを取得しないとならないかも…（←記憶がかなり曖昧です）

違う意味でしたら、失礼。

ブラウザの表示領域から高さを指定、ブラウザを動かしても可変させたい。

No1です。

横から失礼します。

この回答への補足

＞表示後にブラウザを動かすと合わせて可変するようにすることができず～

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング