首页 > 移动平台 > 详细

css 移动端页面,在ios中,margin-bottom 没有生效

时间:2019-07-12 19:40:38      阅读:221      评论:0      收藏:0      [点我收藏+]

在开发中,你会遇到各种美轮美奂的UI交互设计图,下面这种UI图,我在开发时就在布局上遇到一个小问题

问题现象:ios 手机滚动到底部,底部的margin-bottom不生效,Android手机和模拟器都是正常的,虽然不是什么大bug,但是,有问题就要解决

问题图片展示

技术分享图片

正常图片展示
技术分享图片

经过对比没有问题的页面,找到了原因,测试来测试去,一条不符合效果就不对,

html, body {
    height: 100%;
    background: #ec4349;
}
// 外部包裹的元素 overflow: hidden;
.wrapper{
    overflow: hidden;
}
// 内部元素只能使用padding margin 进行定位
.content{
    box-sizing: border-box;
    position: relative;
    padding: 1.24rem 0 .36rem;
    margin: 4.43rem .3rem 1rem;
}

关于布局有很多种,css3写出的动画也很炫,所以我们再开发中需要多看,多研究!

css 移动端页面,在ios中,margin-bottom 没有生效

原文:https://www.cnblogs.com/lisaShare/p/11177986.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!