html - 强制子 div 宽度匹配父 div 宽度

Question

我有以下 HTML 元素。

<div id="theparent">
    <div class="thechild">
        <div class="anotherchild"></div>
    </div>
</div>

以及这些元素的 CSS。

#theparent{width: 90%;}
.thechild{width: 100%; padding: 10px;}
.anotherchild{}

现在我想要的是 .anotherchild div 宽度必须等于或等于 .theparent div 的宽度，同时保持 的填充。 thechild div，该怎么做？非常感谢任何建议、建议和想法。

Answer 1

由于 .thechild 的填充是已知的，您可以使用 CSS3 calc()函数将该已知值添加到 100% 可能的任何值，并用负余量修复偏移量。

.anotherchild{
  margin-left:-10px;
  width:calc(100% + 20px);
}