如何将嵌套 div 的宽度调整为等于祖先 div 的宽度？

Question

我的页面结构为嵌套 div。它们具有填充和边距，因此内部 divs 通常在物理上小于外部 divs。但是，在某些情况下，我希望内部 div 之一（下图中的红色框）横向扩展以匹配最外层 div.

的左右边缘

<div id="div-a">
  <div id="div-b">
    <div id="div-c">
      <div id="div-d">
      </div>
    </div>
  </div>
</div>

这只是一个示例 - 嵌套的 div 数量可能会有所不同。最外面的 div 的宽度是可变的。所有 div 的高度也是可变的。

我试过使用绝对定位，但这会从文档流中删除 div-d。由于我不知道其内容的高度，我无法补偿。还有其他建议吗？感谢您的帮助。

#div-a {
  position:relative;
}
#div-d {
  position:absolute;
  left:0;
  right:0;
}

Answer 1

这种方法可以解决吗？

#div-c {
position:relative;
}
#div-d {
position:absolute;
padding:0 -(div-c + div-b + div-a padding values) 0 -(div-c + div-b + div-a padding 
values)}

Answer 2

#div-c {
    display: flex;
    align-items: center;
}

#div-d {
    width: calc(100% + PADDINGS + BORDERS);
}

PADDINGS：每个 parents div 填充的总和。

BORDERS：每个 parents 边界的总和。

Answer 3

不幸的是，我找不到针对我的特定问题的 CSS 解决方案。我不得不求助于 Javascript.

把需要全角的div换成另一个div

<div id="div-a">
  <div id="div-b">
    <div id="div-c">
      <div id="div-d-wrapper">
      <div id="div-d">
      </div>
      </div>
    </div>
  </div>
</div>

使用这个CSS

#div-a {
  position:relative;
}
#div-d {
  position:absolute;
  left:0;
  right:0;
}

应用以下 Javascript（使用 jQuery）

$('#div-d-wrapper').height($('#div-d').outerHeight());

Answer 4

div{
  padding:10px;
  border: 1px solid red;
}

#div-d{
  margin-left:-32px;
  margin-right:-32px;
}

我对给定的 div 使用了硬编码值。我的解决方案是在 css 中使用负边距。当 div 动态增长时，您可以使用 javascript 或 jquery 从子项 div 中找到父项范围并相应地计算边距。

fiddle 演示：https://jsfiddle.net/bqrxtLvd/

来源： Negative margin css tricks

Detailed negative margin

如何将嵌套 div 的宽度调整为等于祖先 div 的宽度？

How can I adjust the width of a nested div to equal the width of an ancestor div?

css

position