人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: hiyarihatto
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript イベント ウィンドウ サイズ サイト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● uchd
●27ポイント

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

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

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

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

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


2 ● kazu1107
●27ポイント

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


3 ● llusall
●26ポイント

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


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

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


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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ