如何使子div与父div的高度匹配？

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

.parent {
  display: flex;
  height: 300px; /* 设置一个固定高度或使用百分比 */
}

.child {
  flex: 1; /* 让子元素占据所有可用空间 */
}

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

.parent {
  position: relative;
  height: 300px; /* 设置一个固定高度或使用百分比 */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

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

.parent {
  display: grid;
  height: 300px; /* 设置一个固定高度或使用百分比 */
}

.child {
  grid-area: 1 / 1 / 2 / 2; /* 占据整个网格区域 */
}

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

.parent {
  height: 300px; /* 设置一个固定高度或使用百分比 */
}

.child {
  height: 100%; /* 子元素高度设置为父元素的100% */
}