展开div以包含绝对定位的内容

Question

我有一个div包含一堆绝对定位的控件.这些控件是动态生成的,我希望div扩展,以便它将覆盖宽度和高度的所有内容.我怎么能在CSS中这样做？

Answer 1

这可以通过CSS grid 实现：

.container {
  display: grid;
}

.container > * {
  grid-area: 1/1;
}

.child {
  /* Instead of using top/left, use margins: */
  margin-top: 10px;
  margin-left: 50px;
}

这将创建一个只有一个单元格的网格，每个孩子都进入该单元格。

一个孩子的布局不会影响其他孩子，他们只是相互叠加，但网格 ( .container) 将扩展以适应所有孩子的边界。

演示：https : //codepen.io/jaffathecake/pen/zWrvZx

Answer 2

如果我理解正确的话你可以这样写：

.parent{
 position:relative;
 width:100px;
 height:100px;
}
.dynamicDiv{
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
}