jQuery：自动调整绝对位置的子div的大小

Question

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

尝试这样的事情（大致近似，根据需要进行调整）

$('#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

由于您已标记了jQuery，所以我也将为您提供jQuery样式的解决方案：

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