footer置底的几种方式

当我们要设置网页中的footer置底（sticky footer），我们可以这样办

body元素内的结构代码如下

  

    

        
啦啦啦啦
        
啦啦啦啦
        
啦啦啦啦
    
  
  

    

      
联系电话
      
请拨打111
    
  

方式一:

但是当我们的内容区块过多超过一屏时,就会出现footer不会随着内容往后移(不再置底)的问题

接下来的两种方式就能解决当内容过多时,footer永远都置底

方式二：使用calc()设置内容高度

上面的80px=30px+50px，是因为假设内容区块和footer的间距为30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句话，我们就可以计算出内容区块的自动伸缩高度，从而让footer置底

注意,calc()使用加减法时要当心，记得在+,-号的前后加一个空格。这样做的原因是在未来我们在calc()函数内部可能会用到关键字,为了到时候能区别开-是关键字的连字符还是运算符减号

方式三：使用Flexbox弹性盒子布局

其中，把flex设置为一个大于0的值，比如flex:1，实现了内容区块自动伸展并占满所有的可用空间
注意，响应式网页设计时，

1. vh,vw跟着显示窗口（视图）的宽度或高度，而不是父元素的宽度或高度
2. vw:viewport width，1vw相当于显示窗口宽度的1%
   vh:viewport height，1vh相当于显示窗口高度的1%
3. 兼容性：IE9+，chrome/firefox/safari/opera支持，[iOS]safari 8+支持，[Androidbrowser4.4+支持，chrome for android39支持

利用Flexbox弹性盒子布局，仅用四行代码，就实现了footer置底

每天都努力一点点
谢谢你看完

---