html - 容器元素扩展到其位置 :absolute contents 的大小

Question

在这个标记中:

<div id="A">
  <div id="B">
  </div>
</div>

如果“#A”有 position:relative 而“#B”有 position:absolute，似乎“#A”想要折叠到零大小，不管“#B”的实际大小如何。如何让“#A”扩展到其内容的大小？

Answer 1

你不能用 CSS 做到这一点，你需要 JavaScript 来设置父容器的 width 和 height(#A) .

您可以使用 .offsetHeight 和 .offsetWidth。

两者都返回实际的width/height + padding-left 和padding-right/ padding-top 和 padding-bottom + border-left-width 和 border-right-width/border-顶部宽度 和 border-bottom-width。

---

在下面的示例中，我为父容器 (#A) 提供了一个 backgroundImage 以及 width 和 height 与子容器相同，并将子容器的 (#B) background 和 border 的 alpha 值设置为 0.5 更好地解释它。

var a = document.getElementById('A');
var b = document.getElementById('B');

a.style.height = b.offsetHeight + 'px';
a.style.width = b.offsetWidth + 'px';
a.style.backgroundImage = 'url(http://www.lorempixel.com/' + b.offsetWidth + '/' + b.offsetHeight + ')'

#A {
  position: relative;
}
#B {
  position: absolute;
  background: rgba(210,180,140, 0.5);
  width: 300px;
  height: 100px;
  border: 5px solid rgba(210,0,0, 0.5);
  padding: 10px;
}

<div id="A">
  <div id="B">
  </div>
</div>

您可以在这里阅读更多相关信息:http://kingori.co/minutae/2013/05/relative-parent-absolute-children/