使用CSS实现子元素填满父容器的剩余空间
在前端开发中，经常会遇到需要让子元素的高度自动填满父容器剩余空间的情况。这在布局设计上十分常见，特别是当我们需要实现一个响应式的页面时。
方法一：使用flexbox
Flexbox是CSS3中新增加的一种布局模型，它可以轻松地实现元素的弹性伸缩和对齐。通过使用flexbox，我们可以自动将子元素的高度填满父容器的剩余空间。
首先，我们需要将父容器设置为一个flex容器，并通过设置其flex-direction属性来控制子元素的排列方向。
.parent {
display: flex;
flex-direction: column;
}
接下来，将父容器的子元素设置为flex项目，并在必要时设置它的flex-grow属性为一个非零值。
.child {
flex-grow: 1;
}
这样子元素就会根据父容器的剩余空间自动填满高度。
方法二：使用绝对定位和top/bottom属性
另一种实现子元素填满父容器剩余空间的方法是使用绝对定位。通过将子元素的定位方式设置为绝对定位，并结合top和bottom属性，我们可以让子元素的高度自动扩展。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
在这个方法中，我们将父容器设置为相对定位，然后将子元素设置为绝对定位，并指定其top和bottom属性为0，意味着子元素的顶部和底部与父容器的顶部和底部对齐。这样子元素的高度就会填满父容器的剩余空间。
方法三：使用calc()
还有一种方法是使用calc()函数，它可以使用数学表达式来计算元素的大小，并可以结合其他单位进行计算。
.child {
height: calc(100% - 50px);
}
在这个方法中，我们通过将子元素的高度设置为calc(100% - 50px)，其中50px是一个固定值。这样子元素的高度就会自动填满父容器的剩余空间。
总结
在本文中，我们介绍了三种使用CSS实现子元素填满父容器剩余空间的方法：
使用flexbox：通过设置父容器的display属性为flex，并设置子元素的flex-grow属性为一个非零值。
使用绝对定位和top/bottom属性：通过将子元素的定位方式设置为绝对定位，并设置top和bottom属性为0。
使用calc()：通过使用calc()函数来计算子元素的高度，从而让其填满父容器的剩余空间。
根据实际需求和布局设计，我们可以选择其中的一种方法来实现子元素的自适应高度。这些方法在响应式设计中特别有用，能够帮助我们实现灵活和适应不同屏幕尺寸的布局。