收藏
回答

margin-bottom无效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug view 客户端 6.7 2.4.2

小程序给一个view设置margin-bottom 模拟器上是好的 但是真机上无效

由于这个view需要一个背景 所有如果把margin-bottom改为padding-bottom 背景会走样

有人遇到 该怎么解决么?


片段

https://developers.weixin.qq.com/s/s2UTjQmg7d4p

最后一次编辑于  2018-12-22
回答关注问题邀请回答
收藏

7 个回答

  • yeluodev1226
    yeluodev1226
    2018-12-25

    我遇到过,应该是bug,margin-top/margin-bottom在某些情况下都不会生效。可以添加一个空的view或者套个父view加padding,再或者加<view style="height: 1px;"/>

    2018-12-25
    赞同
    回复
  • Yoฉันคิดถึง
    Yoฉันคิดถึง
    2018-12-24

    苹果手机页面最底下的margin-bottom是无效的 ,给底下添加一个空的view

    2018-12-24
    赞同
    回复
  • 叔
    2018-12-24

    应该是ios10之后的bug吧

    我记得之前遇到过,你只需要在最后的一个view后面在加一个<view style="height: 1px;"></view>应该就可以了

    2018-12-24
    赞同
    回复
  • 一步一脚印
    一步一脚印
    2018-12-24

    比如现在父级元素是全屏的,元素宽高100px;


    position:absolute;

    top:50%;

    margin-top:-50px;

    left:50%;

    margin-left:-50px;


    不是居中的吗?怎么是不管用?

    2018-12-24
    赞同
    回复 2
    • 勇敢的少年
      勇敢的少年
      2018-12-24

      我不是要实现居中 你在ios上试下片段就知道了

      2018-12-24
      回复
    • 一步一脚印
      一步一脚印
      2018-12-24回复勇敢的少年

      兄弟,首先我没有去测试,不过既然padding-bottom可以使用,那你给找个元素再加一个父级,父级设置个padding-bottom占位置不行吗?

      2018-12-24
      1
      回复
  • 赵青山
    赵青山
    2018-12-23

    margin-bottom有bug很早以前遇到过,不知道现在还有没有,解决办法也是有的,你这个写的看不懂,position:absolute会脱离文档流,view的层级比footer高,两者就不在一个平面上,view会遮住footer,footer有啥用,还叫footer,不是应该放下面吗?

    2018-12-23
    赞同
    回复 1
    • 勇敢的少年
      勇敢的少年
      2018-12-24

      footer是fixed 在底部的


      2018-12-24
      回复
  • 管凯旋
    管凯旋
    2018-12-22

    我手机上有效果的啊,无效的是什么手机

    2018-12-22
    赞同
    回复 8
    查看更多(3)
  • ==
    ==
    2018-12-22

    真机有用啊,margin-bottom

    2018-12-22
    赞同
    回复 6
    • 勇敢的少年
      勇敢的少年
      2018-12-22

      我试了是无效的

      <view class="container">

      </view>

      <Footer footIndex="0"></Footer>


      .container {

      display: block;

      text-align: center;

      background-image: url("");


      width: 100%;

      min-height: calc(100% - 65px);

      position: absolute;

      margin-bottom:65px;

      background-size: 100% 100%;

      }


      .Footer{

          width:100%;

          height:65px;

      }




      2018-12-22
      回复
    • ==
      ==
      2018-12-22回复勇敢的少年

      。。。改补一下css的基础了

      position:absolute会脱离文档流,然后margin就失效了

      2018-12-22
      回复
    • 勇敢的少年
      勇敢的少年
      2018-12-22回复==

      那模拟器上怎么是好的?

      2018-12-22
      回复
    • ==
      ==
      2018-12-22回复勇敢的少年

      我这边模拟器是没有用的。。而且模拟器和真机不是一样的。

      2018-12-22
      回复
    • 勇敢的少年
      勇敢的少年
      2018-12-22回复==

      我觉得你说的不对 我在模拟器上试了 是有效果的 你可以试一下片段 并不是因为脱离文档流导致的无效

      2018-12-22
      回复
    查看更多(1)