2009-12-31 283 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> 

回答