移动端设置position: fixed；固定定位，底部出现一条缝隙，不知原因，欢迎探讨！！！

打不着的大喇叭

于 2024-02-08 13:00:32 发布

阅读量1.3k

点赞数 8

分类专栏：微信小程序文章标签：前端微信小程序小程序 html css css3

本文链接：https://blog.csdn.net/weixin_49931650/article/details/136078078

版权

微信小程序专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1、问题

在父盒子中有一个子盒子，父盒子加了固定定位，需要子盒子上下都有要边距，用margin或者padding挤开时，会出现缝隙是子盒子背景颜色的。

测试过了，有些手机型号有，有些没有，微信小程序同移动端都有

如下代码，并没有设置底边框

<view class="videoContainer">
  <!-- 头部区域 -->
  <view class="search-box">
    <view class="search iconfont icon-sousuo" bindtap="toSearch">
      大家都在看 更多精彩视频
    </view>
  </view>
</view>

.videoContainer {
  background-color: #f8f9fd;
  height: 200vh;
}

.videoContainer .search-box {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background-color: gold;
}

.videoContainer .search {
  margin: 15rpx auto 10rpx;
  width: 90%;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  background-color: red;
  color: #767c92;
  letter-spacing: 2rpx;
}