当我在父母身上添加亲戚时，无法增加孩子的身高

Question

我想将一个高度添加到儿童div ，但是当我添加位置：相对向父母添加时，它就不起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent-box {
  position: relative;
  background-color: red;
  width: 100%;
  height: 100%;
  padding: 2rem;
  top: 0;
  left: 0;
}

.child-box {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: green;
  top: 0;
  left: 0;
}

<div class="parent-box">
  <div class="child-box">
    <h4>child box</h4>
  </div>
</div>

Answer 1

您需要将根部元素和身体设置为100％的高度。

解释：
您的父盒的高度为100％，即父母的全高 - 身体。您没有设置身体的高度，其初始高度是自动的。因此，您的身高是自动的，只占用适合内容和填充所需的空间。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.parent-box {
  position: relative;
  background-color: red;
  width: 100%;
  height: 100%;
  padding: 2rem;
  top: 0;
  left: 0;
}

.child-box {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: green;
  top: 0;
  left: 0;
}

<div class="parent-box">
  <div class="child-box">
    <h4>child box</h4>
  </div>
</div>

这是一个改进的解决方案，代码较少：

宽度100％是块元素默认的，插图可用于儿童div而不是高度和顶部/左/左，顶部和左侧，上下没有对相对位置元素的影响。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.parent-box {
  position: relative;
  background-color: red;
  height: 100%;
  padding: 2rem;
}

.child-box {
  position: absolute;
  background-color: green;
  inset: 0;
}

<div class="parent-box">
  <div class="child-box">
    <h4>child box</h4>
  </div>
</div>