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

コメント

このブログの人気の投稿

【.NET】DataGridViewを選択した際に背景色を変更しない

Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links

【PostgreSQL】ROWNUMのように行番号(現在行)を取得するROW_NUMBER