如何使父级 Div 扩展以适合其绝对定位的子级？

根据绝对位置的子 Div 调整父 Div 高度

在网页设计中，通常需要将元素定位在父容器中非线性时尚。这可以使用绝对定位来实现，它将元素从正常的文档流中删除。然而，当尝试让父级 div 扩展其高度以适应绝对定位的子级时，会出现一个常见问题。

问题

考虑以下 HTML 和 CSS：

<div>
<pre class="brush:php;toolbar:false">parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

在此场景中，child2 具有动态高度，并且应显示在 child1 下方。但是，父 div #parent 不会扩展以包含 child2 的高度。

解决方案

出现此问题是因为绝对定位的元素已从流量。因此，它们被其他元素忽略，导致父 div 不考虑 child2 进行高度计算。

替代方案

为了解决这个问题，有两个主要选项:

• 手动调整大小：使用非 CSS 方法，例如作为 JavaScript，重新定位 div 并动态调整父级的高度。
• CSS 布局： 使用 CSS flexbox 或网格布局来反转元素的视觉顺序。这样可以在保持元素流的同时灵活定位。