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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Tomhs3000/article/details/78949950

一、情景

最近开发一个内嵌app的页面时,发现页面底部元素margin-bottom在ios下失效,在安卓内正常......

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

2.h5页面内嵌app,ios下失效(同1);

ps:display:table-cell内  margin失效不在本文讨论范围内。

二、解决办法

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

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

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

有其他情况欢迎留言一起讨论。。。。。


扫描二维码关注公众号,回复: 3798344 查看本文章


猜你喜欢

转载自blog.csdn.net/Tomhs3000/article/details/78949950
今日推荐