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

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

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

问题图片展示

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

正常图片展示
css 移动端页面,在ios中,margin-bottom 没有生效

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

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 没有生效

上一篇:首次给app添加页面


下一篇:Android开发 VideoView视频播放详解