父母div扩展到子div

Question

我要divs：

<div id="outerContent">
  <div id="innerContent">
  </div>
</div>

innerContents的位置是绝对的（我需要这种方式用于JavaScript动画）。如何让outerContent扩展到innerContents的高度，就像innerContent不会设置为position：absolute？

Answer 1

设置position：absolute从文档的渲染流中删除元素的渲染。所以父元素对内部元素一无所知。

您可以使用javascript同步其宽度。 像那样：

$('#outerContent').width($('#innerContent').width());

和身高一样。

还有其他选择。

<div id="outerContent">
  <div id="innerContent"></div>
  <div id="innerContentDouble" style="visibility:hidden"></div>
</div>

innerContentDouble应该与innerContent具有相同的内容，但它不应该是position：absolute。所以父母的div将会扩展，但是“visibility：hidden”的内容将不会显示“doubled”div的内容。但这不是一个很好的做法：）

Answer 2

两件事：

1）您应该能够在不需要position:absolute;的情况下将内部距离滑动，position:relative;就足够了。优点是它仍然被认为是在渲染流程中，就像aveic所说的那样。

请参阅my jsfiddle example

2）如果你想使用absolute，你可以确保它不会因为只使用JS启用它而搞砸了，因为你无论如何都要用JS来执行动画。所以在JS中，只要说$('#innerDiv').css({position: absolute});，你仍然不会放弃没有启用JS的人。