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

Posted 2023-03-06

【中文标题】展开 div 以包含绝对定位的内容

【英文标题】：Expand div to contain absolutely positioned content

【发布时间】：2012-08-24 07:26:04

【问题描述】：

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

【参考方案1】：

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

.parent
 position:relative;
 width:100px;
 height:100px;

.dynamicDiv
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;

【讨论】：

-1 这不会扩展父级以包含子级。它只是将父级设置为固定大小。它可能已经解决了 OP 的问题，但它没有回答问题。

【参考方案2】：

这很难实现。当你有一个相对父级和绝对子级时，它们不会影响父级 div 的大小。

你也必须使用亲戚孩子。为什么控件的位置是绝对的？

但是在 CSS 失败的地方，javascript 来拯救。所以这个可以解决。

【讨论】：

在我的情况下，孩子们是绝对定位的，因为我想在画布上放置一个 D3 SVG，其中 svg 处理鼠标交互，而画布处理实际渲染

【参考方案3】：

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

【讨论】：

这没有回答问题。其中包含一堆绝对定位的控件。该解决方案将使它们全部堆叠在一起。使用此解决方案无法分散它们。

正如我在答案中所说，您可以使用边距来偏移相对于网格的项目，例如codepen.io/jaffathecake/pen/qBPQoyL

【参考方案4】：

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

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;