Question

我使用2个div进行以下标记。 #child div设置了position：absolute;

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

我想通过代码更改孩子的身高，以便它总是像这样自动调整容器大小：

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

它有默认功能吗？ THX

Answer 1

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

使用：

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

注意：孩子的身高与父母的身高相关（80％），所以无论你设置父亲的身高或动态调整身高，它都会改变身高。孩子，但父母必须有一个明确设定的身高（即使是100％），否则这将不起作用。

Answer 2

尝试这样的事情（粗略近似，根据您的需要调整）

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

Answer 3

试;

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

这假设您的外部div没有填充和边框。如果你这样做，你需要在某些浏览器中取消这些高度，以确保它匹配。

Answer 4

由于您使用jQuery标记，我也将为您提供jQuery样式解决方案：

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

jquery：auto-size绝对定位的子div

4 个答案: