一、使用min-height实现高度自适应
在实现高度自适应的过程中，最简单也是最常用的方法就是使用min-height属性。min-height属性允许元素比所设置的高度要小，但不能比设置的高度更小。
例如，我们可以为一个容器设置min-height为100px，这样无论该容器内是否有内容，它都至少有100px的高度。
.container{
min-height: 100px;
}
需要注意的是，对于使用min-height的容器，如果其中有绝对定位元素，无法撑起其高度，我们可以通过使用padding-bottom属性来解决这个问题。
.container{
min-height: 100px;
position: relative;
padding-bottom: 20px;
}
.absolute{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
}
二、使用flexbox实现高度自适应
Flexbox是一个比较新的CSS布局模式，它允许我们方便地控制元素的布局模式，其中就包括高度自适应。我们可以为父元素设置display: flex，再为子元素设置flex: 1，这样子元素就可以根据父元素的高度进行自适应了。
.parent{
display: flex;
flex-direction: column;
}
.child{
flex: 1;
}
需要注意的是，如果父元素和子元素都不设置高度，那么子元素会自适应填满父元素，如果父元素设置了高度，子元素会继承父元素的高度。
三、使用grid实现高度自适应
与Flexbox类似，CSS Grid布局也可以实现高度自适应，我们只需要为父元素设置display: grid，再为其中的一行或一列设置grid-template-rows或grid-template-columns。
.parent{
display:grid;
grid-template-rows: 100px 1fr;
}
这里我们将第一行设定为固定高度100px，第二行自适应填满剩余空间。
四、使用vh单位实现高度自适应
vh是一个CSS视口单位，1vh等于视口高度的1%。我们可以使用vh单位来实现元素相对于视口高度的自适应。
.container{
height: 50vh;
}
需要注意的是，使用vh时需要确保视口高度是准确的，否则会导致元素高度错误。
五、使用Table实现高度自适应
传统的HTML Table也可以实现自适应高度，我们只需要将表格置于一个固定高度或自适应高度的容器中，然后为表格的一个或多个行设置高度为100%即可。
.container{
height: 200px;
}
.table{
height: 100%;
}
.row{
height: 100%;
}
需要注意的是，如果容器有padding或border，需要将其排除在外，否则会导致高度计算错误。
六、结语
通过上述几种方法的介绍，我们可以看到实现高度自适应的方式真的是多种多样。根据不同的需求和实际情况，我们可以选择合适的方法进行实现，改善页面的布局效果。
