子div的宽度大于父div

Question

我需要我的孩子div遵守父div的底部，因此position: absolute和bottom: 0px。我还需要孩子的宽度与父母的宽度相同，我认为box-sizing: border-box可以工作，但是由于填充和边距，孩子的宽度仍向右突出。

我该如何解决？

.parent {
  height: 500px;
  min-width: 500px;
  position: relative;
  background-color: red;
}

.child {
  padding: 10px 10px 10px 10px;
  margin: 10px 10px;
  background-color: grey;
  bottom: 0px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
}

<div class="parent">
  <div class="child"></div>
</div>

在JSFiddle上查看

Answer 1

使用left:0/ right:0而不是width:100%避免由于边距引起的溢出，因为实际上您的元素在父元素内占据500px + 20px（左右边距）。

顺便说一句，它box-sizing: border-box可以正常工作，但在元素内部，因此在宽度中包括了填充，但是空白处当然没有：

border-box告诉浏览器在您为width和height指定的值中考虑边框和 填充 ... ^ref

.parent {
  height: 500px;
  min-width: 500px;
  position: relative;
  background-color: red;
}

.child {
  padding: 10px 10px 10px 10px;
  margin: 10px 10px;
  background-color: grey;
  bottom: 0px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
}

<div class="parent">
  <div class="child" ></div>
</div>