移动端开发底部元素margin-bottom失效解决办法

一、情景

记得之前开发一个微信端页面时，发现页面底部元素margin-bottom在ios下失效，在安卓内正常......

1.safari浏览器内页面底部元素设置margin-bottom失效；

2.h5页面内嵌app，ios下同样失效；

3.h5页面微信端，ios下同样失效；

 

二、解决办法

1.在底部使用空白div撑起高度，缺点是会多出来不必要的div。

2.给body设置height:100%，然后给body设置padding-bottom。缺点是如果针对不同情况页面底部元素可能存在隐藏(比如a条件下显示，b条件下隐藏)，那么在b条件的情况下可能导致安卓和ios样式不统一的情况出现。

总而言之，根据实际开发需求选用合适的解决办法。