jquery - 基于另一个元素的动态高度(jQuery)

Question

HTML:

<div class="main" style="float:left">
  lorem ipsum <br />
  lorem ipsum <br />
  lorem ipsum <br />
</div>
<div style="float:right">
  <div class="block">block</div>
  <div class="block">block</div>
  <div class="block">block</div>
</div>

jQuery:

$('.block').height($(".main").height() / (3));

...每个 block 高度 = 主 block 高度/3

这是不准确的，因为高度没有考虑 .block 的边距/填充。如何自动或手动减去填充/边距？

Answer 1

您需要使用outerHeight

$('.block').height($(".main").outerHeight( true ) / 3); 

编辑我最初误读了文档，并认为默认情况下包含margin。我错了!请务必将 true 传递给 outerHeight 函数以包含边距。 谢谢@Alex Sexton!