如何为绝对定位的子容器设置父容器的高度？

父级高度和绝对定位

当我们使用容器及其绝对定位或相对定位的子级时，我们可能会遇到挑战，在确定容器的高度的同时确保容器的高度孩子们仍留在其中。

问题

考虑以下 HTML 和 CSS代码：

目标是确保“bar”文本出现在四个方块之间，而不是它们后面。但是，由于正方形的绝对定位，容器的高度无法根据其子级的尺寸来设置。

解决方案

2022 更新：

现代 CSS 布局技术（例如 Flex 或 Grid）提供了更优雅的解决方案。建议探索这些选项以获得更好的支持和灵活性。

原始答案：

使用纯CSS，不可能在保持绝对高度的同时设置父级的高度为其子级定位。

替代方案方法：

• JavaScript：渲染后计算绝对定位子级的高度，并用它来设置父级的高度。
• 浮动和边距： 使用浮动和边距定位子项，同时将它们保留在文档流中。在父级上利用溢出：隐藏（或clearfix技术），根据子级的尺寸扩展其高度。

以上是如何为绝对定位的子容器设置父容器的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！