前言

移动端用fixed布局非常爽，但是兼容问题也是一堆，尤其是用固定在底部的输入框，在输入法键盘出来之后，输入法控件的位置直接错位；还有的设备直接不支持fixed。

如何检测是否支持fixed样式

  1. var div = document.createElement('div');
  2. div.style.cssText = 'display:none;position:fixed;z-index:100;';
  3. body.appendChild(div);
  4. console.log(window.getComputedStyle(div).position != 'fixed');

不支持时如何做方案

absolute

当然是：absolute了，写最小高度，绝对定位在页面底部即可。

tip:为了不影响页面的正常内容，记得给主题内容增加padding-bottom为底部元素的大小。

flex

flex:1 弹性盒布局能满足站用剩下的全部空间。

底部输入框的交互方案如何做？

底部的输入框是假的，只作为一个点击控件，当输入法键盘出现之后，再展示另外的输入控件，显示输入文本。

小结

能不用就不用fixed布局。