jquery：自动调整绝对定位的子 div答案

【问题标题】：jquery: auto-size absolute-positioned child divjquery：自动调整绝对定位的子 div
【发布时间】：2013-02-21 02:21:30
【问题描述】：

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

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

我想通过代码更改孩子的高度，以便它始终自动调整到其容器的大小，如下所示：

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

它有默认功能吗？谢谢

【问题讨论】：

jquery 不是必需的。纯 CSS 可以做到。看我的回答。
css 的唯一问题是元素的 100% 高度不适用于所有浏览器
100% 页面高度在某些版本的 IE 上存在问题。除此之外，CSS 比 Javascript 更可取，并且会带来非常更好的用户体验。如果有的话，你应该尽可能使用 CSS，在 CSS 不起作用的少数情况下（你可以检测到）使用 Javascript/jQuery。

标签： javascript jquery css layout

【解决方案1】：

试试；

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

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

【讨论】：

【解决方案2】：

<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%），否则这将不起作用。

【讨论】：

【解决方案3】：

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

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

【讨论】：

这将使子 div 的大小相对于页面大小，而不是父 div。
@James Goodwin：嗯？它会将子元素设置为相对于父 div，而不是页面。
对不起，我在想某种原因，因为它绝对会使用页面的高度，但实际上你是对的！ :)

【解决方案4】：

既然你用 jQuery 标记了，我也会为你提供一个 jQuery 风格的解决方案：

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

【讨论】：