2007年12月27日木曜日

【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>
コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives