父格扩展到儿童的div

我要的div：父格扩展到儿童的div

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

innerContents的立场是绝对的（我需要它的方式对JavaScript动画）。如何将outerContent扩展为innerContents的高度，就好像innerContent不会被设置为position：absolute一样？

来源

2011-03-30 donkapone

你确定你不能使用'position：relative'吗？ – zzzzBov 2011-03-30 16:59:09

两件事情：

1）你应该能够在innerdiv滑走，而不需要position:absolute;，position:relative;应该足够了。它的优点是仍然被认为是在渲染流程中，正如aveic所称的那样。

见my jsfiddle example

2）如果你想使用absolute，可以确保它仅与JS启用它，因为你正在使用JS反正进行动画拧不任何东西。所以在JS中，只需要说$('#innerDiv').css({position: absolute});，而且你仍然不会放弃没有启用JS的人。

来源

2011-03-30 20:27:45 JakobTischler

设置位置：绝对从文档的渲染流程中移除元素的渲染。所以父元素对内部元素一无所知。

您可以使用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的内容将不会显示。但它不是一个非常好的做法:)

来源

2011-03-30 16:55:48 aveic

+1。请注意，第二种方法远非完美，因为当“重复”div放置在文档流的“正常”位置时，与绝对定位时相比，它的大小可能不同。 – melkamo 2011-03-30 17:07:05

你们忘了提及 – aveic 2011-03-30 17:09:10

这个javascript对我不起作用，因为我希望网站在javascript关闭的情况下降级得很漂亮。我不想用第二种方法 - 就像你说的那样：这不是一个好习惯。我实际上想要实现的是将div动画化，然后在屏幕上向左滑动，然后在jQuery放入一些新内容之后，再次从屏幕右侧滑入。从我读过的 - 只有当div完全定位时才能实现。任何其他想法？ – donkapone 2011-03-30 19:41:15

父格扩展到儿童的div

回答

相关问题