![图片[1]-【新主题彩蛋】Css 布局实现“Sticky Footer”（Footer一直在底部）-盛大互联](https://by.itxmt.com/wp-content/uploads/2022/06/image-4-1024x716.png)
做过网页开发的大佬都晓得：页面BFC渲染模式，块级元素会从上到下排列。假如页面有Header，Main，Footer三部分组成，Header和Footer高度固定，Main高度未知，当Main为空时，Footer和Header就会挨着。而我们最终要实现的效果是：Footer区域一直处于页面底部，即便Main为空，高度不足，Footer也要处于底部。main高度高的时候，Footer自动下移。
针对这个问题，JS动态计算有点大材小用。实现这样的效果，七娃推荐以下CSS方法：
html布局：
<body> <header></header> <main></main> <footer></footer> </body>
1.flex弹性布局实现
css方案：
body{display: flex; flex-flow: column; min-height: 100vh}
main{flex:1}
Flex弹性布局 是非常适合实现这种效果的，很多前端只会Flexbox 水平方向布局，但别忘了它也能实现垂直布局，思路很重要啊！
2.Css的计算属性calc
通过计算main的最小高度将header和footer减去，这样main就不会出现高度不足的情况了。
css方案：
header{height:80px}
main{min-height:calc(100vh - 200px);}
footer{height:120px}
3.相对定位实现absolute
css方案：
body{height:100%;position: relative;padding-bottom:120px}
footer{ position: absolute;bottom: 0;height: 120px;}
这种是将footer一直定位在main上层，然后body又将footer的高度填充上去，这样不会遮挡main里面的内容。也是不错的解决办法。
写在最后
你可能会说是不是还有其他办法，当然，布局不一样，方法也不一样，例如：表格，js实现，都能解决这样的需求。还有一直被雪藏的grid布局，都是可以实现的。思路和知识决定了多少办法。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[Java] 超级签名 免签封装 安卓打包 企业签名 超级签名MDM 企业签名MDM 自助分发多合一系统-盛大互联](https://by.itxmt.com/wp-content/uploads/2022/10/image-44-300x91.png)
暂无评论内容