CSS实现页面底部固定的三种常用方法

效果图如下：

1，使用相对定位和绝对定位

注意：当页面高度高于可视窗口的时候（也就是出现了滚动条）；这时如果再使用绝对定位 向上滑动的时候，就已经不固底了，因为页面进来定位只计算一次；

解决方案：使用fixed固定定位，永远把footer固定到底部，有滚动条也是不影响的；

2，使用flex弹性布局，将footer的margin-top设置为auto

注意：在浏览器中，100vh的高度包括了底部的工具栏，而我们真实需要的高度其实是浏览器的可视高度也就是100%；
在使用100vh的时候，手机浏览器底部的操作栏可能会遮挡底部按钮；
所以这时页面的高度应该使用100%；

3，通过css内置函数calc()动态计算内容的高度

min-height: calc(100vh - 130px); 130 其实就是 header和footer的高度；

到此这篇关于CSS实现页面底部固定的三种常用方法的文章就介绍到这了,更多相关CSS页面底部固定内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！