自動調整大小，僅在窗口變大時調整大小

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代碼。