父div扩展到子div

发布于 2024-10-27 12:44:23 字数 262 浏览 6 评论 0原文

我必须 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

拥抱影子 2024-11-03 12:44:23

设置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 的内容不会显示。但这并不是一个很好的做法:)

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:

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

And same with height.

And there is other option.

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

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 :)

地狱即天堂 2024-11-03 12:44:23

有两件事:

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文