如何在调整父div大小时同步调整子div的尺寸？

嘿，我来帮你搞定这个问题！你当前的代码只是给每个div单独添加了可调整大小的功能，但没把父div和子div的尺寸变化关联起来。要实现父div调整时子div同步跟着变，我们可以监听父div的resize事件，在父div尺寸变化时动态计算并更新子div的大小。

核心思路是监听父div的resize事件，在父元素尺寸改变时，根据需求设置子元素的新尺寸。下面给你两种常用的实现方式：

方式1：按固定比例同步 #

如果希望子div始终保持和父div的宽高比例（比如子div1宽度是父div的60%，高度是20%），可以用这种方式：

完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="main_div" style="width:500px;height: 500px;border: 2px solid grey;">
  <div class="child_div1" style="width:300px;height: 100px;border: 2px solid black;"></div>
  <div class="child_div2" style="width:400px;height: 100px;border: 2px solid red;"></div>
</div>

<script>
$(function() {
  // 初始化父div可调整大小，同时监听resize事件
  $(".main_div").resizable({
    resize: function(event, ui) {
      // 获取父div的新尺寸
      const parentWidth = ui.size.width;
      const parentHeight = ui.size.height;
      
      // 按比例设置子div1：宽度60%，高度20%
      $(".child_div1").css({
        width: parentWidth * 0.6,
        height: parentHeight * 0.2
      });
      
      // 按比例设置子div2：宽度80%，高度20%
      $(".child_div2").css({
        width: parentWidth * 0.8,
        height: parentHeight * 0.2
      });
    }
  });
  
  // 如果不需要子div单独被调整，可以删掉下面两行；如果需要保留子div单独调整功能，就保留
  $(".child_div1").resizable();
  $(".child_div2").resizable();
});
</script>

方式2：按固定间距同步 #

如果希望子div保持和父div的固定间距（比如子div1距离父div左右各10px，高度固定），可以修改resize事件里的逻辑：

// 替换父div resize事件中的子div设置代码
$(".child_div1").css({
  width: parentWidth - 20, // 左右各10px间距
  height: 100 // 固定高度
});

$(".child_div2").css({
  width: parentWidth - 50, // 左右各25px间距
  height: 100
});

关键提示 #

• 一定要把代码放在$(function() { ... })中，确保DOM加载完成后再执行逻辑。
• 如果你不需要用户单独拖动子div调整大小，直接删掉子div的resizable()初始化代码即可，避免布局混乱。
• 你可以根据自己的实际需求，修改比例、间距或高度数值，适配不同的布局场景。

内容的提问来源于stack exchange，提问作者Tirkesh Turkesh