Question

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

Answer 1

使用CSS网格可以实现：

.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

这很难实现。如果你有一个绝对孩子的亲戚，他们不能影响父div的大小。

你也必须使用亲戚。为什么控件定位绝对？

但是，当CSS失败时，JavaScript就会受到拯救。所以这可以解决。

Answer 3

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

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

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

3 个答案: