2009-12-31 284 views
0

我有下面这个脚本,将调整窗口上的“.content”调整它的工作正常,但唯一的问题是,它抽搐它等待,直到调整大小完成,然后调整“.content”是那里等待窗口大小调整时调整大小的调整大小?jquery窗口调整大小

的JavaScript

function foo(){ 
    //e.cancelBubble = true; 
    $('.content').each(function(){ 
     p = $('.content').parent(); 
     var ch = 0; 
     var cw = 0 
     c = p.children().each(function (i,n){ 
      ch +=$(this).height() 
      cw +=$(this).width() 
     }); 
     $(this).height(p.height()-(ch-$(this).height())) 
      .width(p.width()-(cw-$(this).width())) 
     t = $('#tmp'); 
     t.text('p:height: ' +p.height()+' c:'+ch); 
    }); 
} 
$(window).resize(foo) 

CSS

 html,body{height: 100%; width: 100%; margin: 0; padding: 0; } 
     .holder{ 
      width: 100%; 
      height: 100%; 
      background: yellow; 
     } 
     .header{ 
      background-color: red; 
     } 
     .footer{ 
      background-color: brown; 
     } 
     .content{ 
      background-color: #eeeeee; 
     } 

HTML

<body onload="foo();" onresize="foo()"> 
    <div class="holder"> 
     <div class="header"> 
      #header 
     </div> 
     <div class="content"> 
      #content 
      <div id="tmp">Waiting...</div> 
     </div> 
     <div class="footer"> 
      #footer 
     </div> 
    </div> 
</body> 

回答