javascript - 找到两个对象的高度差异并将高度分配给另一个对象

Question

找到两个对象的高度差异，并使用 jquery 或 javascript 将高度分配给另一个对象。实际上对象(容器/部分)具有动态内容，因此这些对象的高度是动态的。所以，我想找到两个对象的差异，然后将这个差异分配给另一个对象。例如Div3(高度尺寸)= Div1(高度尺寸)-Div2(高度尺寸)。

Answer 1

假设div的id为div1、div2和div3。然后使用 JQuery .height() 函数。

$("#div3").height($("#div1").height() - $("#div2").height());

您可以使用 .height() 或 .innerHeight() 或 .outerHeight()。 (有关 difference between the three 的信息，请参见此处)

var diff = $("#div1").height() - $("#div2").height();
$("#div3").height(diff);
$("#div4").css("margin-top", diff);

#div1 {
  height: 150px;
  background-color: red;
}

#div2 {
  height: 100px;
  background-color: blue;
}

#div3 {
  background-color: green;
}

#div4 {
  height: 100px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>