在开发中,你会遇到各种美轮美奂的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;
}