边界子div与边界父div完全重叠？

Question

假设此解决方案我们不知道父div的维度。

图片将最佳地说明问题：

父div有一个黑色边框，子div有一个相同宽度的紫色边框。子项扩展以填充父项（根据需要），但扩展不包括边框（不需要）。相反，孩子应该完全适合父母的顶部，就像两个完全相同尺寸的堆叠玻璃片一样，这样孩子就可以完全覆盖父母。

生成上图

的片段

＆＃13;

＆＃13;

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }


.parent {
  background: pink;
  border: 3px solid black;
  position: relative;
  width: 100px;
  height: 100px;
}

.child {
  background: green;
  border: 3px solid purple;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Snippet产生正确的结果，但非法，因为使用了父divs维度

＆＃13;

＆＃13;

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }


.parent {
  background: pink;
  border: 3px solid black;
  position: relative;
  width: 100px;
  height: 100px;
}

.child {
  background: green;
  border: 3px solid purple;
  position: absolute;
  width: 100px; /* not allowed!  should be 100% */
  height: 100px;/* not allowed!  should be 100% */
  left: -3px;
  top: -3px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题

如何在不知道父div宽度和高度的情况下制作第二个片段的效果？可以使用父div的边框宽度，但子项的宽度和高度属性都应为100%。

Answer 1

让孩子'继承'的宽度和高度。这将继承父级的宽度和高度。

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }


.parent {
  background: pink;
  border: 3px solid black;
  position: relative;
  width: 100px;
  height: 100px;
}

.child {
  background: green;
  border: 3px solid purple;
  position: absolute;
  width: inherit;
  height: inherit;
  left: -3px;
  top: -3px;
}

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