致谢
十分感谢各位网络工作者的开源教学，本内容特别鸣谢以下链接:
https://www.w3cplus.com/css3/css-secrets/sticky-footers.html
目录
1-应用场景
在网页设计上，一般会有这样的需求，在页面内容撑不满整个屏幕的时候，页脚
要求固定在底部，当页面内容内容能够撑满屏幕的时候，要求页脚随着页面内容
的增多而向下挤，仔细一想，还挺不容易实现
2.受局限解决思路
- 假设页面结构是这样的
<main></main>
<footer></footer>
- 计算容器高度的方法
当页面内容不足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}
网友评论