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

父元素和子元素高度不一致是一个很常见的问题，特别是在制作响应式页面时，常常需要子元素和父元素高度一致。本文将介绍几种方法来实现子元素高度与父元素一致。

1. 使用padding

我们可以通过在父元素上设置`padding`来达到高度一致的效果。

.parent {
    padding-bottom: 100%;
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

上面的代码中，我们首先在父元素上设置一个与宽度同样大小的`padding-bottom`，这样子元素就会占据了父元素的全部高度。然后，我们给子元素设置绝对定位，并将`top`和`bottom`都设置为0，这样子元素就会填充父容器的全部高度。

需要注意的是，在这种方法下，子元素不能设置上下的`margin`。

2. 使用flexbox

使用flexbox也是一个比较流行的方法，我们可以使用 `display: flex`, `align-items: stretch` 和 `flex-grow: 1` 三个属性来实现高度一致的效果。

.parent {
    display: flex;
    flex-direction: column;
}
.child {
    flex-grow: 1;
}

上面的代码中，我们首先将父元素的`display`属性设置为`flex`，然后将子元素的`flex-grow`属性设置为1，这样子元素就会在父元素中占据剩余的全部空间。

需要注意的是，flexbox在某些旧版本浏览器中可能会存在兼容性问题。

3. 使用grid

使用grid也是一个比较流行的方法，我们可以使用 `display: grid` 和 `grid-template-rows: 1fr` 两个属性来实现高度一致的效果。

.parent {
    display: grid;
    grid-template-rows: 1fr;
}
.child {
    /* 不需要任何样式 */
}

上面的代码中，我们将父元素的`display`属性设置为`grid`，然后将子元素的高度设置为`1fr`，这样子元素就会占据父元素的全部高度。

需要注意的是，部分旧版本浏览器不支持grid布局。

4. 使用表格布局

我们也可以使用表格布局来实现高度一致的效果。

.parent {
    display: table;
}
.child {
    display: table-row;
}

上面的代码中，我们将父元素的`display`属性设置为`table`，然后将子元素的`display`属性设置为`table-row`，这样子元素就会占据父元素的全部高度。

需要注意的是，表格布局在某些场景下可能存在缺陷。

总结

通过使用上述方法，我们可以轻松实现子元素和父元素高度一致的效果。

在选择使用哪种方法时，我们需要考虑到不同浏览器的兼容性，以及不同方法间的差异，选择适合自己项目的方案。

再次注意，在`padding`方法中子元素不能设置上下的`margin`。

希望本文能够为大家在开发中遇到高度不一致的问题提供参考。