解决移动端页面在苹果端滑不到底部的问题

本人在开发项目中遇到的问题,在项目进入到测试阶段的时候,苹果端手机上的页面滑不到底部(底部固定有导航栏),也就是我们常说的margin-bottom或者padding-bottom失效了,这可蛋疼了。经过几次实验,我发现自己在body内的容器所写的margin-bottom没有起到一点效果,苹果机上显示不出来,自己在body上的margin-bottom也没有效果,这是因为在body容器内的div:margin-bottom在苹果端上高度不会自适应的。因此解决方法两种。

法一:在body上设置高度100%,body中的元素可以设置margin-bottom。

复制代码
body{

   height:100%;
}

div{
  
  margin-bottom:90px;

}
复制代码

法二:在body的底部写一个空的div。

   

复制代码
div{
  
    height:90px;


}
复制代码
posted @ 2018-09-20 17:24  小菜与小鸟  阅读(1685)  评论(0编辑  收藏  举报