CSS子元素跟父元素的高度一致的实现方法

现在我将为您详细讲解“CSS子元素跟父元素的高度一致的实现方法”的完整攻略，并提供两条示例说明。

方法1：使用display:flex布局

使用flex布局可以很方便地实现子元素的高度与父元素一致。

具体步骤如下：

1. 设置父元素的样式为 display:flex;。
2. 设置子元素的样式为 flex:1;，使其自动填充父元素的空白处。

示例代码：

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

.parent {
  display: flex;
}
.child {
  flex: 1;
}

方法2：使用绝对定位和100%高度

使用绝对定位和100%高度可以在不使用flex布局的情况下实现子元素的高度与父元素一致。

具体步骤如下：

1. 设置父元素的样式为 position:relative;。
2. 设置子元素的样式为 position:absolute; top:0; bottom:0;，并设置left和right属性，使其自动填充父元素的空白处。

示例代码：

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

.parent {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

以上就是实现子元素跟父元素高度一致的两种方法，您可以根据实际需求选择其中的一种或组合使用。