jquery height() problem.

Question

This has been driving me mad someone help coz i don't seem to see where the problem is.

<div id="parent">
   <div id="child"></div>
</div>
<script>
   $('#parent').height(300)

   $('#child').height($('#child').parent().height()-10); //EDITTED LINE
</script>

the above is the logic of what i need to do. I check the html tag of "#parent" it say style="height: 300px;" however the child has a value of -10 :( should have 290 ; I have checked in DOM, the value is right i have also tried the .css('height') but with no luck. has anyone experienced this kind of problem ?if so whats the solution :) put me out of missary pls

Sorry guys it is the "parent().height()" where the problem stands. See script again (sorry again)

Answer 1

Why not just set it to 290?

$('#child').height(290);

Answer 2

Try to create a variable befor

var childheight = $('#parent').height()-10;
$('#child').height(childheight);

Answer 3

.height() will fetch it with the 'px' attached sometimes. You must remove the 'px', as otherwise you are doing '300px' - 10. You can do this by:

var height = parseInt($('#el').height(),10);

to convert it to a number.

As such, your code should be changed from:

$('#child').height($('#child').parent().height()-10);

to:

$('#child').height(parseInt($('#child').parent().height(),10)-10);

or even better, add caching to your code to make it faster! (you don't have to refetch #child.)

var $child = $('#child');
$child.height(parseInt($child.parent().height(),10)-10);

You also forgot a semicolon on your first code line, however that my not be related.