如何使用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/