有时候,我们可能需要象新版的yahoo邮箱一样，让一些数据显示块可以根据页面大小进行自适应。事实并不难,但是如果单纯用css控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,javascript可以让我我们实现司空见怪的自适应页面,在isunxoft的hr开源项目就应用到.
        实现原理:
         获取ie显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象win form程序一样,根所软件界面的大小,进行设计相关对象的长宽,绝对位置等属性,但是在web上程序没有办法实时检测到窗口大小变化,只能用让实现自适应的方法通过settimeout 函数进行隔时递归调用.
         下面是摘自isunxoft hr开源项目sysform.aspx实现的方法.
         注:$("")是有变化的元素.
   var h;
   var w;
   function resize()
   {  
   
    var he = document.body.offsetheight;[来源www.iocblog.net]
    var wi = document.body.offsetwidth;
    if($("datatable").style.display.tolowercase()==""||$("datatable").style.display.tolowercase()=="inline")
    {
     if (h==he&&w==wi)
     {
      if($("leftmenu").style.display.tolowercase() == "none" )
      {
       $("divdatalist").style.width = wi - 30;
      }
      else
      {
       $("divdatalist").style.width = wi - 223;
      }       
      settimeout("resize()",1000);
      return;
     }
     h = he;
     w = wi;
    
     if (he>100)
     {
      $("divdatalist").style.height = he - 172;
     
     }
     if(wi>200)
     {
      $("divdatalist").style.width = wi - 223;
      if($("leftmenu").style.display.tolowercase() == "none" )
      {
       $("divdatalist").style.width = wi - 30;
      }
     }
    }[来源www.iocblog.net]

    if($("dataempwidows").style.display.tolowercase()=="inline"||$("dataempwidows").style.display.tolowercase()=="")
    {
     if (h==he&&w==wi)
     {
      if($("leftmenu").style.display.tolowercase() == "none" )
      {
       $("dataempwidows").style.width = wi - 30;
      }
      else
      {
       $("dataempwidows").style.width = wi - 223;
      }       
     }
     h = he;
     w = wi;
     if (he>150)
     {
      $("dataempwidows").style.height = he - 132;
     }
     if(wi>200)
     {
      $("dataempwidows").style.width = wi - 223;
      if($("leftmenu").style.display.tolowercase() == "none" )
      {
       $("dataempwidows").style.width = wi - 30;
      }
     }
   
    }
    if(typeof($("eipwindows")) != "undefined")
    {
     //if($("eipwindows").style.display.tolowercase()=="inline")
     //{
     // if (h==he&&w==wi)
     // {
     //  if($("leftmenu").style.display.tolowercase() == "none" )
     //  {
     //   $("eipwindows").style.width = wi - 30;
     //  }
     //  else
     //  {
     //   $("eipwindows").style.width = wi - 223;
     //  }       
     // }
     // h = he;
     // w = wi;
     // if (he>150)
     // {
     //  $("eipwindows").style.height = he - 132;
     // }
     // if(wi>200)
     // {
     //  $("eipwindows").style.width = wi - 223;
     //  if($("leftmenu").style.display.tolowercase() == "none" )
     //  {
     //   $("eipwindows").style.width = wi - 30;
     //  }
     // }   
     //}
    }
    settimeout("resize()",1000);
   }
   resize();

   然后就在网页上调用resize();一旦窗口大小有变化,或是分辩率有变化,都能确保能够实现真正意义上的自适应.