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

在开发中，你会遇到各种美轮美奂的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写出的动画也很炫，所以我们再开发中需要多看，多研究！

转载于:https://www.cnblogs.com/lisaShare/p/11177986.html