zoukankan      html  css  js  c++  java
  • 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写出的动画也很炫,所以我们再开发中需要多看,多研究!

  • 相关阅读:
    BugReport-仿微信app
    成长、责任、和公司的关系
    团队如何做决定
    课堂练习
    课堂练习
    NABCD model
    课堂练习
    日程管理测试用例
    测试
    Bug报告
  • 原文地址:https://www.cnblogs.com/lisaShare/p/11177986.html
Copyright © 2011-2022 走看看