CODEWITHSUNDEEP
jquerydynamic
eozzy
eozzy

Reputation: 68760

Dynamic height based on another element (jQuery)

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

... each block height = height of main / 3

It is inaccurate because height doesn't consider the margin/padding of the .block. How do I subtract the padding/margin either automatically or manually?

Upvotes: 2

Views: 1117

Answers (2)

Doug Neiner
Doug Neiner

Reputation: 66231

You need to use outerHeight

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

EDIT I misread the docs originally, and thought margin was included by default. I was wrong! Be sure to pass true to the outerHeight function to include margin. Thanks @Alex Sexton!

Upvotes: 3

Alex Sexton
Alex Sexton

Reputation: 10451

You may be interested in the outerHeight and outerWidth methods in jQuery

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

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

Hope that helps!

Upvotes: 2

Related Questions