页脚固定底部

致谢

十分感谢各位网络工作者的开源教学，本内容特别鸣谢以下链接:
https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

目录

• 1-应用场景
• 2-受局限解决思路

1-应用场景

在网页设计上，一般会有这样的需求，在页面内容撑不满整个屏幕的时候，页脚
要求固定在底部，当页面内容内容能够撑满屏幕的时候，要求页脚随着页面内容
的增多而向下挤，仔细一想，还挺不容易实现

2.受局限解决思路

1. 假设页面结构是这样的

2. 计算容器高度的方法
   当页面内容不足100vh的时候，计算出刚好和页脚结合能成撑满整个屏幕高度的值，通过使用视窗相对单位和calc()

main { min-height: calc(100vh - 计算值); 

或者计算页脚高度值

footer { min-height: calc(100vh - 页脚高度)}

3.利用Flexbox优雅解决

任何元素设置了flex大于0，元素就会灵活的控制自己的尺寸，来适配容器的剩余空间。

在这里不管页脚的高度是多少，main灵活适配剩余空间

body { min-height:100vh; display:flex; flex-derection:clown }
main { flex: 1}