CODEWITHSUNDEEP
javascriptjqueryhtmlcssheight
valerio0999
valerio0999

Reputation: 12138

get the height of a div based on other divs heights

here's a simple html sample:

<div id="column-5" style="height:300px;width:200px;background:red">
<div class="httwitter-thread-navigation" style="height:223px;width:100%;background:pink">
    <div class="mydiv" style="width:auto;background:yellow;"></div>
</div>

what i want to achieve is giving the height to .mydiv based on the following operation: .mydiv's height should be "#column-5's height" - ".httwitter-thread-navigation's height - 40px"

which translates in this case in

300 - 223 - 40 = 37px

how do i get the 37px height with javascript?

consider that the heights of column-5 or the other one may not be specified in the css, so the javascript should detect it's innerHeights (including margins and paddings)

thank you so much

fiddle here: http://jsfiddle.net/omegaiori/hafn5/1/

Upvotes: 0

Views: 104

Answers (2)

Timotheus0106
Timotheus0106

Reputation: 1586

here you go:

$(document).ready(function() {

    $('.mydiv').css('height', ($('#column-5').height() - $('.httwitter-thread-navigation').height() - 40);

});

Upvotes: 1

adeneo
adeneo

Reputation: 318192

.mydiv's height should be "#column-5's height" - ".httwitter-thread-navigation's height - 40px"

that pretty much sums it up ?

$('.mydiv').height(function() {
    return $('#column-5').height() - $('.httwitter-thread-navigation').height() - 40;
});

FIDDLE

jQuery has both outerHeight and innerHeight as well, depending on what you need. Read the docs.

Upvotes: 2

Related Questions