divタグの高さを、windowのサイズのbuttomまでにするというCSSを分かる人はいませんか?


ちず窓のサイトの
http://chizumado.jp/
左の地図のようにWindowのサイズに応じて高さを変えたいのですが。
幅ならwidth=100%で実現するのですが、高さはheight=100%だと上手くいきません。

ウィンドウサイズ変更のイベント
window.onresizeに、
divの高さをwindowサイズに応じて設定する
関数を代入すればできそうだと思うのですが、
javascriptからdivタグの高さを変えるにはどういう命令をしたらいいのですか?
教えてください。
お願いしますm(_ _)m

回答の条件
  • 1人2回まで
  • 登録:2006/07/21 03:58:32
  • 終了:2006/07/28 04:00:05

回答(3件)

id:uchd No.1

uchd回答回数2ベストアンサー獲得回数02006/07/21 09:21:27

ポイント27pt

一瞬、何の事を質問しているのだろう?と考え込んでしまいましたがhiyarihattoさんは

<div height=100%>
~
</div>

と記述されたのでしょうね。高さの指定は

<div style="height:100%;">
~
</div>

と書きます。JavaScriptまで手を出さなくても良いと思います。

id:kazu1107 No.2

mzk回答回数199ベストアンサー獲得回数142006/07/21 11:50:39

ポイント27pt

<html>

<head>

<SCRIPT type="text/javascript">

<!--

function changeHeight(id){

var obj=document.all && document.all(id)

|| document.getElementById && document.getElementById(id);

if(obj){

clientSize=getWindowClientSize();

obj.style.height=""+(clientSize.height)+"px";

}

}


function getWindowClientSize(){

var result={"width":0,"height":0};

if(window.self&&self.innerWidth){

result.width=self.innerWidth;

result.height=self.innerHeight;

}else if(document.documentElement && document.documentElement.clientHeight){

result.width=document.documentElement.clientWidth;

result.height=document.documentElement.clientHeight;

}else{

result.width=document.body.clientWidth;

result.height=document.body.clientHeight;

}

return result;

}

//-->

</SCRIPT>

</head>

<body onload="changeHeight('hoge');" onresize="changeHeight('hoge');">

<div id="hoge" style="background:#000;" >

a

</div>

</body>

</html>


ある程度いろいろなブラウザに対応したつもりです。

今回の例ではgetWindowClientSizeでwidthも取得してるのでライブラリとして使えるようになってます。

getWindowClientSize()で得られるエリアサイズはマージンなどを考えて減算したりしてないので、そこらへんはデザインとの兼ね合いで調整してみてください。

id:llusall No.3

llusall回答回数505ベストアンサー獲得回数612006/07/21 13:32:42

ポイント26pt

2 回答者:kazu1107 さんの補足ですみません。


<DIV>タグの前に、何かのタグがあると縦スクロールバーが出てしまうようです。

以下、勝手ながら補正してみました。


//      obj.style.height=""+(clientSize.height)+"px";

        obj.style.height=""+(clientSize.height - obj.offsetTop - 20)+"px"; // 20は調整値

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • デスクトップアプリケーションを開発していると、ウィンドウの大きさに合わせてウィンドウのメイン部の中身の大きさが動的に変わったりします。しかし、Webアプリケーションでは、な
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません