代码之家 › 专栏 › 技术社区 › Tirkesh Turkesh

当触发父级调整DIV时,如何调整子级DIV的大小

jquery-ui-resizable jquery-ui jquery javascript

1

Tirkesh Turkesh · 技术社区 · 7 年前

我总共有三个分区,一个是父分区,在那个分区有两个子分区,现在我想做的是,如果我调整父分区的大小,我也要调整子分区的大小。有人能帮我怎么做吗?这里我添加了我的代码

$(".main_div").resizable();
	    $(".child_div1").resizable();
	    $(".child_div2").resizable();

<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>

2 回复 | 直到 7 年前

1

0

muecas 7 年前

你可以使用 alsoResize 选项指定在调整父级大小时要调整大小的嵌套元素:

$(".main_div").resizable({
  alsoResize: '.child_div1, .child_div2'
});
$(".child_div1").resizable({
  containment: "parent"
});
$(".child_div2").resizable({
  containment: "parent"
});

<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>

有关可调整大小选项的详细信息 here .

希望有帮助!

2

0

Mikaal Anwar 7 年前

只需将“最大宽度”和“最大高度”设置为100%,或者设置为希望子DIV相对于父DIV的大小比例。

$(".main_div").resizable();
$(".child_div1").resizable();
$(".child_div2").resizable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="overflow:hidden;max-width:100%; max-height:100%; width:500px;height: 500px;border: 2px solid grey;">
  <div class="child_div1" style="width:300px;max-width:100%; max-height:100%; height: 100px;border: 2px solid black;"></div>
  <div class="child_div2" style="width:400px;max-width:100%; max-height:100%; height: 100px;border: 2px solid red;"></div>
</div>

您还应该看看: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/