CSSなどにおける高さの指定について

質問

CSSにおいて、DIVなどのボックスの高さをとある値にしたいのですが、なかなか方法が見つからないので質問します。

やろうとしているのは、ウィンドウの上端からはじまり、下端からたとえば150px上の位置で終わるボックスを作ろうとしています。
つまりDIVの高さが100%-150pxという指定をしたいのですが、これをそのまま入れても計算してくれるわけではないのでどうすれば良いのか困っています。

どなたかわかる方いますでしょうか。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

{
position: absolute;
top: 0;
bottom: 150px;
}

古めのブラウザ（IE6、IE7も？Safari3、Firefox3など？）はうまく表示できないと思います。
そういうのも対応したい場合はJavaScriptで処理する（heightを計算、指定する）必要があります。
（IE限定ならTIME（CSSファイルの中に記述するexpressionのやつ）でもいけます。）

お礼

ご回答ありがとうございます。
思い通りの表示になりました！
とても助かりました。

意外と単純な考え方なのに思いつきませんでした・・・。
改めてありがとうございました。

回答No.2

t_ohta

JavaScriptを使ってウィンドウサイズを取得し、その高さから150px引いた値をdivのスタイルにセットします。

var WindowHeight = document.documentElement.clientHeight;
var DivHeight = WindowHeight - 150;
document.getElementById('[divのID]').style.height = DivHeight + "px";

といった感じです。

お礼

ご回答ありがとうございます。
やってみたものの、残念ながらFirefoxとChromeで挙動が異なりどちらも意図したようにはなりませんでした。

今回はもうお一人の提示して下さった方法で解決しましたが、今後参考にさせて頂きます。
ありがとうございました。