css 跟随父容器高度 |css div垂直居中方法

大家可以使用CSS中的height属性，将其设置为100%。这样就可以让容器的高度随着父容器自适应。但是，这种方法并不总是有效。因为，有时候大家会使用其它的属性，如margin、padding、border等，这些属性会影响容器的高度。

.parent{
height: 500px;
}
.child{
height: 100%;
}
// 如果子容器添加了margin，那么这个方法就不再适用
.child{
height: calc(100% - 20px);
}

为了解决高度自适应的问题，大家可以使用CSS3中的calc()函数。大家可以在height属性中使用calc()函数，并适用减法运算，来解决容器高度被一些其它属性影响的问题。

在以上示例中，大家可以看到，大家使用了height: calc(100% – 20px);来解决子容器添加margin属性，导致高度不自适应的问题。这个示例用到了calc()函数，它可以在height属性中实现基本的数学运算。使用这种方法，大家就可以让容器高度自适应了。