强制子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

向子div添加box-sizing规则：

.thechild {
    width: 100%;
    padding: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

jsFiddle example （为了公开性而添加了边框）

Answer 2

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

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