基于另一个元素的动态高度（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));

...每个块高度=主要高度/ 3

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

Answer 1

您需要使用outerHeight

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

编辑我最初误读了文档，并且默认包含了margin。我错了！请务必将true传递给outerHeight功能以包含保证金。 谢谢@Alex Sexton！

Answer 2

您可能对jQuery中的outerHeight和outerWidth方法感兴趣

http://docs.jquery.com/CSS/outerHeight

http://docs.jquery.com/CSS/outerWidth

希望有所帮助！