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;
}

これにより、セルが1つしかないグリッドが作成され、すべての子がそのセルに入ります。

1つの子のレイアウトは他の子に影響を与えません。それらは互いに重なり合うだけですが、グリッド（.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

そして、これが私がこのアプローチを使用するcodepenです： 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;
}