jquery: auto-size absolute-positioned child div

Question

hi, i'm having the following markup using 2 divs. the #child div has set position:absolute;

+------------------------------+
|    +----------+              |
|    | #child   |              |
|    +----------+              |
|                              |
|                              |
|                              |
+------------------------------+

i want to change the child's height by code so that it always auto-sizes to its container like this:

+------------------------------+
|    +----------+              |
|    | #child   |              |
|    |          |              |
|    |          |              |
|    |          |              |
|    +----------+              |
+------------------------------+

is there a default function for it? thx

Answer 1

<div id="parent">
  <div id="child"></div>
</div>

with:

#parent { position: relative; background: red; height: 500px; width: 700px; }
#child { position: absolute; background: yellow; height: 80%; top: 10%; bottom: 10; left: 100px; width: 300px; }

Note: the child's height is relative (80%) to the parent's height so no matter what you set the height of the parent to or dynamically resize it to, it'll change the height of the child but the parent must have an explicitly set height (even if its 100%) or this won't work.

Answer 2

Try something like this (rough approximation, adjust to your needs)

$('#child').css('left', '20%').css('top','10%').css('height','80%').css('width', '30%');

Answer 3

try;

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

this assumes that you have no padding and borders on your outer div. if you do you will need to take these off the height in some browsers to ensure it matches.

Answer 4

Since you tagged with jQuery I will provide you with a jQuery style solution too:

$("#child").height($("#parent").height()*0.8);