自动调整大小，仅在窗口变大时调整大小

Question

我目前正在忙于使用jQuery，并且如果窗口变得越来越大或者越来越小，我试图自动调整一些div的大小。现在它正在工作，但只有当窗户变大时才有效。如果我让窗口更小，我首先必须调整大小之前重新加载页面的div

我的代码：

function size() { 
    var winHeight = $(document).height(); 
    var topHeight = $("#top").height(); 
    var footHeight = $("#footer").height() + 50; 
    var sideWidth = $("#sidebar").width() + 20; 
    var winWidth = $(document).width(); 

    $("#sidebar").css({'height':(winHeight - topHeight)+'px'}); 
    $("#sidebar #navigation").css({'height':(winHeight - topHeight - footHeight)+'px'}); 
    $("#frame").css({'height':(winHeight - topHeight)+'px','width':(winWidth - sideWidth)+'px'}); 
} 

$(document).ready(function(e) { 
    size(); 
    $(window).resize(function() { 
     size(); 
    });   
}); 

的HTML：

<!-- Start Top --> 
<div id="top"> 
    <!-- Start Metabalk --> 
    <div id="metabalk"> 
     <p class="version">Version: 0.0.1</p> 
    </div><!-- Stop Metabalk --> 

    <!-- Start Balk--> 
    <div id="balk"> 
     <div id="logo"> 
      <a href="#" title="Home"><img src="images/logo.png" alt="Logo" /></a> 
     </div> 

     <div id="navigation"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Errors</a></li> 
       <li><a href="#">News</a></li> 
      </ul> 
      <div class="clearleft"></div> 
     </div> 
    </div><!-- Stop balk --> 


<!-- Start Sidebar --> 
<div id="sidebar"> 
<div id="search"> 
      <form> 
       <input class="search" type="text" value="Search..."> 
      </form> 
     </div> 
    <ul id="navigation"> 
     <li> 
      <div> 
       <h2><a alt="content.php"><img src="images/icons/dark/home_24.png" alt="dashboard" /><span>Dashboard</span></a></h2> 
      </div> 
     </li> 
     <li class="select"> 
      <div> 
       <h2><img src="images/icons/dark/globe_24.png" alt="General" /><span>General</span></h2> 
       <span class="plus-min" title="Expand menu"><img src="images/icons/dark/minus_24.png" alt="" /></span> 
      </div> 
      <ul> 
       <li><a alt="form.php">Form</a></li> 
       <li><a alt="content.php">Boxes</a></li> 
       <li><a alt="block.php">Blocken</a></li> 
       <li><a alt="formulier.php">Formulier</a></li> 
       <li><a href="#">Item 5</a></li> 
      </ul> 
     </li> 
     <li> 
      <div> 
       <h2><img src="images/icons/dark/man_24.png" alt="account" /><span>Accoun</span>t</h2> 
       <span class="plus-min" title="Expand menu"><img src="images/icons/dark/plus_24.png" alt="" /></span> 
      </div> 
      <ul> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li><a href="#">Item 3</a></li> 
       <li><a href="#">Item 4</a></li> 
       <li><a href="#">Item 5</a></li> 
      </ul> 
     </li> 

    </ul> 
    <!--Start Footer --> 
    <div id="footer"> 
     <p class="copyright">&copy; <a href="http://pronation-it.nl/" title="Pronation-it">Pronation-it</a> 2012 - 2013</p> 
    </div><!-- Stop Footer --> 
</div><!-- Stop Sidebar --> 

<!-- Start content --> 
    <iframe id="frame" src="content.php"></iframe> 
<!-- Stop Content --> 

它schould是这样的：

+---------------------------------+ 
|   100% width   | 
|    header    | 
+---------------------------------+ 
| 250px | auto resize content  | 
| width | it's a iframe   | 
|  |       | 
|  |       | 
|  |       | 
+-------+-------------------------+ 

我希望你能帮忙，因为在谷歌上我找不到任何有用的东西，适合我。

问候，

Answer 1

看看的height()的文档。它可以返回并设置高度，这意味着你不需要css方法。

Here是一个小例子：

<div id="header"><h1>My Header</h1></div> 
<div id="content" style="border: 1px solid black;">My dynamic content</div> 
<div id="footer">My footer</div> 

<script type="text/javascript"> 
$(window).resize(function() { 
    var freeSpace = $(window).height() - ($("#header").height() + $("#footer").height()); 
    $("#content").height(freeSpace); 
}); 
$(window).trigger('resize'); 
</script> 

如果你还有问题，请提供您的一些HTML代码。