【JavaScript】ウィンドウの大きさに合わせてコンテンツも可変にする
IEやFirefoxでウィンドウの大きさを変えたときに合わせて、内部のコンテンツの大きさも可変にするスクリプトです。
使ってないですけどメモ。
以下のHTMLをそのまま保存でサンプルを実行できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<script language="javascript">
function resizeApp() {
var offsetTop = 0;
var oDivList = document.getElementById("divList");
for( var elem = oDivList; elem; elem = elem.offsetParent ){
offsetTop += elem.offsetTop;
}
var height = getWindowHeight() - offsetTop - 20;
if( height >= 0 ){
oDivList.style.height = height + "px";
}
}
function getWindowHeight() {
if( window.self && self.innerHeight ){
return self.innerHeight;
}
if( document.documentElement && document.documentElement.clientHeight ){
return document.documentElement.clientHeight;
}
return 0;
}
</script>
</head>
<body onresize="resizeApp()" onload="resizeApp()">
<div id="divList" style="border:1px solid red;">
test
</div>
</body>
</html>