【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>