如何使用Javascript調整其組件的DIV大小

Question

我已經使用jquery創建了一個帶有tab組件的兩個DIV的html頁面。選項卡組件可調整大小，並具有最小/最大寬度。 DIV之間有一個可滾動的分隔線。但問題在於div的組成部分，它不是根據調整後的div位置調整大小，而是在另一個div上重疊。

任何建議或代碼將有所幫助。

感謝和問候，

全球

Answer 1

您可以使用jQuery與jQuery resize plugin來調整孩子的div當家長的div已調整（因爲默認jQuery的resize事件處理函數，只有當事件目標是window工作）。

這裏是2秒後，將收縮父格，導致孩子的div也縮水的例子：

的Javascript：

$(document).ready(function() { 
    $('#parent').bind("resize", resizeChild); 
    setTimeout(resizeParent, 2000); 
}); 

function resizeChild() 
{ 
    $("#child").css('width', $('#parent').width() - 20); 
    $("#child").css('height', $('#parent').height() - 20); 
} 

function resizeParent() 
{ 
    $("#parent").css('width', '100px') 
    $("#parent").css('height', '100px') 
} 

HTML：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script> 
<div id='parent'> 
<div id='child'></div> 
</div>​ 

CSS：

#parent { 
    width:200px; 
    height:200px; 
    border:1px solid black; 
} 

#child { 
    width:180px; 
    height:180px;  
    border:1px solid black; 
}​ 

這裏的概念驗證：http://jsfiddle.net/t26ZW/