CSS 实现高度自适应铺满整屏的实现
在前端开发中，经常会遇到需要让某个元素自适应屏幕高度的需求。这篇文章将介绍多种实现方法。
1. 使用绝对定位实现
这是一种比较容易想到的方法，使用绝对定位将元素定位于屏幕顶部，设置一定的底部距离，使元素高度自适应屏幕高度。代码如下：
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
}
这个方法的缺点是，需要设置容器元素的底部距离，如果底部有其他元素，容器的高度会显示不全。解决方法是再增加一个容器元素，用来包裹内容容器和底部元素。代码如下：
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
}
2. 使用flex布局实现
使用flex布局可以很方便地实现高度自适应。设置一个容器元素，使用flex布局，并将其中一个子元素的flex-grow属性设置为1。这个子元素就会自动沾满剩余的空间，从而实现高度自适应。
.container {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
3. 使用vh单位实现
vh单位是指屏幕高度的百分比单位，使用vh单位可以很方便地实现高度自适应。设置一个元素的高度为100vh，就可以使它自适应屏幕高度。
.container {
height: 100vh;
}
4. 使用calc函数实现
使用calc函数可以计算出元素的高度，可以很方便地实现高度自适应。设置一个元素的高度为calc(100% - 50px)，就可以使它自适应屏幕高度。
.container {
height: calc(100% - 50px);
}
总结
以上是几种常见的实现高度自适应的方法。每种方法都有其适用的场景，具体选择哪种方法，需要根据实际情况进行判断。
无论使用哪种方法，在实现过程中，还需要考虑到浏览器兼容性和页面布局的稳定性等问题。