当我在 parent 上添加相对位置时无法在 child 上添加高度

Question

我想将 height 添加到 child div 但是当我将 position: relative 添加到 parent 时它不起作用。

* {
  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

您需要将根元素设置为 body 占据 100% 的高度。

解释：
您的 parent 框的高度为 100%，即 parent - body 的完整高度。 body 没有设置高度，初始高度为auto。因此你的高度是自动的，只占用适合内容和填充所需的space。

* {
  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%，inset可用于child div代替高度和top/left，top和left对相对定位元素没有影响所以将它们从 parent.

中删除

* {
  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>

当我在 parent 上添加相对位置时无法在 child 上添加高度

Unable to add height on child when I add position relative on parent

html

css

height