当IE窗口大小变化时，使用JS调整TextBox的高度宽度

IE的页面上放置一个DIV,在DIV内放置一个TextBox。DIV的高度、宽度总是等于IE窗口大小的1/3（当IE窗口大小变化时，DIV的高度、宽度也随之变化），而TextBox的宽度、高度总是等于DIV的1/2。如何使用JS代码，使得TextBox的高度与DIV的高度相适应。谢谢

解决方案 »

  1.   


    <script> 
    function adjust(obj){
       var div = document.getElementById("pad");
       var txt = document.getElementById("txt");
       var w  = document.body.offsetWidth;
       var h  = document.body.offsetHeight;
       div.style.width = w/3;
       div.style.height = h/3;
       txt.style.width = w/6;
       txt.style.height = h/6;
    }
    window.onload=function(){
      window.onresize = adjust;
      adjust();
    }
    </script>
    <body style="margin:0px;height:0px;">
    <div id="pad" style="background:red;zoom:1;margin:0px;height:0px;">
    <input type="text" id="txt">
    </div>
    </body>
      

  2.   

    谢谢。我试了下，var w  = document.body.offsetWidth;能够得到屏幕的实际大小，而var h  = document.body.offsetHeight;返回的值为0。是不是哪个地方不对了？
      

  3.   

    <script> 
    function adjust(obj){
       var div = document.getElementById("pad");
       var txt = document.getElementById("txt");
       var w  = document.body.clientWidth;
       var h  = document.body.clientHeight;
       div.style.width = w/3;
       div.style.height = h/3;
       txt.style.width = w/6;
       txt.style.height = h/6;
    }
    window.onload=function(){
      window.onresize = adjust;
      adjust();
    }
    </script>
    <body style="margin:0px;height:0px;">
    <div id="pad" style="background:red;zoom:1;margin:0px;height:0px;">
        <input type="text" id="txt">
    </div>
    </body>
      

  4.   


    <script> 
    function adjust(obj){
       var div = document.getElementById("pad");
       var txt = document.getElementById("txt");
       var w  = document.body.clientWidth;
       var h  = document.body.clientHeight;
       div.style.width = w/3;
       div.style.height = h/3;
       txt.style.width = w/6;
       txt.style.height = h/6;
    }
    window.onload=function(){
      window.onresize = adjust;
      adjust();
    }
    </script>
    <body style="margin:0px;height:0px;">
    <div id="pad" style="background:red;zoom:1;margin:0px;height:0px;">
        <input type="text" id="txt">
    </div>
    </body>
      

  5.   

    谢谢。还有一个问题，如果我在right中放置一个DIV ,id名称为：middle。为什么middle的顶部和right的顶部不对齐呢，而是有一个空白.代码如下：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title><style>
      body   {margin:0px; padding:0px;}
      #left { width:300px;float:left;  background:#ccccce;} 
      #right {
    float:left;
    background:#cff;
    } 
       #middle{
    z=100;
    background-color:#F00;
    }
    </style>
    <script type="text/javascript"> 
    function $(id){
      return document.getElementById(id)
    }function adjust(obj)
    {
    var cW=document.compatMode=="CSS1Compat"?document.documentElement.clientWidth:document.body.clientWidth;//alert(cW)
      var cH=document.compatMode=="CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight;//alert(cH)
      var lW=$("left").offsetWidth;
      $("right").style.width=(cW-lW)+"px";
      $("left").style.height=cH+"px";
      $("right").style.height=cH+"px";
      $("middle").style.height=300+"px";
      $("middle").style.width=300+"px";
      $("middle").style.top=0+"px";
      $("middle").style.left=100+"px";
    }window.onload=function(){
      window.onresize = adjust;
      adjust();
    }
    </script>
    </head><body>
    <div id="left">&nbsp;</div>
    <div id="right">&nbsp;
       <div id="middle">
       </div>
    </div>
    </body>
    </html>
      

  6.   

    去掉&nbsp;
    <div id="right"> 
      <div id="middle"> 
      </div> 
    </div> 
      

  7.   

    一般offsetHeight都要考虑浏览器兼容的