HTML+CSS底部footer两种固定方式

网页常见的底部栏（footer）目前有两种：

一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现；

二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；

一、永久固定

    
    
    
    


    内容，可以大量复制看效果

 
    
固定在底部

二、相对固定

    
    
    
    


    

        

            内容，可以大量复制看效果

 
        
    
    
相对在底部

网友的补充：

weixin_44889223：第二种方法有缺陷 一。z-index只作用于定位元素，footer没给定位如何生效 二。如果按照上述方法，当在class为main的div里给两个浮动的子div，底部定位就会失效，解决办法应当是在footer的样式里，再加上clear：both属性，这样才能满足日常布局需要。

原文作者：小巷而已

原文地址：https://blog.csdn.net/xianglikai1/article/details/78411615

（感谢原文作者的分享）