hauteur dynamique basée sur un autre élément (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)); 

... chaque hauteur de bloc = hauteur principale/3

Il est inexact parce que height ne considère pas la marge/padding du .block. Comment puis-je soustraire le remplissage/la marge automatiquement ou manuellement?

Answer 1

Vous devez utiliser outerHeight

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

EDIT J'ai mal lu la documentation à l'origine, et de la pensée margin a été inclus par défaut. J'avais tort! Veillez à transmettre true à la fonction outerHeight pour inclure la marge. Merci @Alex Sexton!

Answer 2

Vous pourriez être intéressé par les méthodes outerHeight et outerWidth dans jQuery

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

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

Hope that helps!