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

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

如果您知道容器的比例并且项目按该比例缩放，则可以使用纵横比来模拟控件的包含...

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

这是我使用这种方法的代码笔： https ://codepen.io/cssguru/pen/yLoKYzR?editors=1100

<div class="img-swap">
  <img src="https://via.placeholder.com/400x300/fff" />
  <img src="https://via.placeholder.com/400x300/fff" />
</div>

html, body {
  margin: 0;
  padding: 1rem;
}

.img-swap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: red;
  
  $pos-x: 10%;
  $pos-y: 10%;
  
  img {
    position: absolute;
    border-radius: .25rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 3px 3px rgba(0,0,0,0.15);
    animation-duration: 14s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: imgSwap;
    z-index: 1;
    bottom: $pos-y; 
    right: $pos-x;
    width: calc(100% - #{$pos-x});
  }
  
  img + img {
    animation-name: imgSwap;
    animation-delay: 7s;
    top: $pos-y; 
    left: $pos-x;
    z-index: 2;
  }
  
  @keyframes imgSwap {
    0% { opacity: 0; top: 0; left: 0; z-index: 1; }
    2% { opacity: 1; top: 0; left: 0; z-index: 1; }
    45% { opacity: 1; top: 0; left: 0; z-index: 1; }
    55% { opacity: 1; top: $pos-y; left: $pos-x; z-index: 2; }
    98% { opacity: 1; top: $pos-y; left: $pos-x; z-index: 2; }
    100% { opacity: 0; top: $pos-y; left: $pos-x; z-index: 2; }
  } 
  
}

Answer 4

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

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