父div扩展到子div
我必须 divs:
<div id="outerContent">
<div id="innerContent">
</div>
</div>
insideContents 的位置是绝对的(我需要这样的 JavaScript 动画)。如何让outerContent扩展到innerContents的高度,就好像innerContent不会设置为position:absolute一样?
I have to divs:
<div id="outerContent">
<div id="innerContent">
</div>
</div>
innerContents' position is absolute (I need it that way for JavaScript animation). How do I get outerContent to expand to innerContents' height as if innerContent wouldn't be set to position:absolute?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
设置position:absolute会从文档的渲染流程中删除元素的渲染。所以父元素对内部元素一无所知。
您可以使用 javascript 来同步它们的宽度。
就像这样:
身高也一样。
还有其他选择。
innerContentDouble 应与innerContent 具有相同的内容,但不应该是position:absolute。因此父级的 div 将会展开,但由于“visibility:hidden”,“doubled”div 的内容不会显示。但这并不是一个很好的做法:)
Setting position:absolute removes the rendering of element from the document's rendering flow. So parent element does know nothing about the inner element.
You can use javascript to sync their widths.
Like that:
And same with height.
And there is other option.
The innerContentDouble should have the same content as innerContent, but it shouldn't be position:absolute. So the parent's div will expand, but coz of "visibility:hidden" the contents of "doubled" div won't be displayed. But it's not a really good practice :)
有两件事:
1)您应该能够将innerdiv滑开,而不需要
position:absolute;
,position:relative;
就足够了。优点是它仍然被认为是在渲染流程中,正如 aveic 所说的那样。请参阅 我的 jsfiddle 示例
2) 如果您确实想使用
绝对
,您可以确保仅通过 JS 启用它不会搞砸任何事情,因为无论如何您都使用 JS 来执行动画。所以在JS中,只要说$('#innerDiv').css({position:absolute});
,你仍然不会抛弃没有启用JS的人。Two things:
1) You should be able to slide the innerdiv away without the need of
position:absolute;
,position:relative;
should suffice. The advantage is it's still considered to be in the rendering flow, as aveic called it.See my jsfiddle example
2) if you do want to use
absolute
, you can make sure it doesn't screw anything up by only enabling it with JS, since you're using JS anyway to perform the animation. So in JS, just say$('#innerDiv').css({position: absolute});
and you still won't abandon people without JS enabled.