IOS margin-bottom失效

最新推荐文章于 2024-08-19 13:45:49 发布
最新推荐文章于 2024-08-19 13:45:49 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： IOS margin-bottom失效
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.youkuaiyun.com/CamilleZJ/article/details/90748258
本文探讨了H5页面在iOS设备上margin-bottom样式无效的问题，通过实验发现将margin-bottom改为padding-bottom可以解决问题，初步判断与iOS系统自动管理margins有关。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近做一个H5移动端活动，发现一个问题：H5页面设置了margin-bottom，在模拟器和安卓手机上都是正常的，但是IOS手机上就没有效果，一开始以为是层级问题，改为在父层上设置，但是仍然没有效果。

解决：margin-bottom改为padding-bottom或者设置一个div用高度撑开

原因：具体不详，以下是网友总结

参考资料

从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。

如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins为0pt。所以自己设定的margin-bottom会失效。

 

（内容高度超出所属父容器，父容器有min-height，内容height是auto）

小程序底部最后一个元素设置margin-bottom部分android机型不生效IOS可以
闫瑞锋的博客
08-10 678
解决办法统一设置 改成padding-bottom padding-bottom:
IOS网页适配，解决iphoneX下部小黑条问题 和hover不起作用
java_utf8的博客
01-27 408
感谢博主博文： 原文链接 https://blog.youkuaiyun.com/chunxiaqiudong5/article/details/104065563?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBai
IOS margin-bottom失效问题
weixin_33753003的博客
12-21 1479
问题 webAPP中内嵌的H5页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone中无论嵌套多少层margin-bottom，均会失效。 原因 参考资料 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值...
WeChat------IOS中margin-bottom无效!!!
COCOLI_BK的博客
08-24 343
问题描述: 小程序给一个view设置margin-bottom 模拟器上是好的 但是(iOS)真机上无效!!! 解决方案: 可以添加一个空的view设置响应的高度来模拟对应的样式或者套个父view加padding
移动端开发底部元素margin-bottom失效的处理方式
这是我的博客
05-09 2905
在移动端开发的过程中，经常会有在底部进行一个元素固定定位在，这样我们主体数据有需要设置margin-bottom 去防止主体数据被底部遮挡的情况。 这在android手机中这样设置是完全没有问题的，不过在ios手机上就会出现底部定位遮挡了主体内容。当时还尝试了使用padding-bottom去处理，然效果还是不太理想。 查询方法后，一下两种方式是可行的： 主体最后设置一个空白的div（设置好高...
微信小程序-底部元素margin-bottom失效解决办法
crabfrog的博客
09-19 6599
解决办法1 外层元素加1rpx padding .wrapper{ height: auto; padding-bottom:1rpx; } 解决办法2 用padding代替margin
小程序ios端 底部留白 margin-bottom无效
weixin_42704663的博客
07-05 1495
在app.wxss里面加一句 page{ padding-bottom:1rpx; }
u-view组件底部安全区无法适配解决方案
weixin_72552097的博客
08-19 2099
由u-view组件库引出的一些底部安全区解决方案
uni-app 开发微信小程序遇到的bug总结(1)
qq_41524691的博客
11-27 1161
1.倒计时在ios上不显示？ 解决：将2020-10-10 [10:00:00]此类日期[时间]格式转化为2020/10/10[10:00:00]。除了单纯的时间显示意外，以时间为判断依据的功能建议都转换一下，不然可能会出现其它意想不到的问题 // 2020-10-10 const time = '2020-10-10'; const formatTime = this.$handleTime(time).format('YYYY/MM/DD'); ... 2.设置margin-bottom无效？ 解决：
<template> <view class="container"> <view class="banner-section"> <image class="banner-image" src="/static/IntegrityCulture.png" /> </view> <view class="title">廉洁文化资讯</view> <view class="news-list"> <scroll-view scroll-y="true" :enhanced="true" :use-passive="true" :show-scrollbar="false" class="scroll-container" > <view v-for="item in newsList" :key="item.id" class="news-item" @click="navigateToDetail(item)" > <view class="news-content"> <text class="news-title">{{ item.title }}</text> <text class="news-summary">{{ item.summary }}</text> <text class="news-date">{{ item.publishDate }}</text> </view> <view class="status-box" :class="item.read ? 'read' : 'unread'" > {{ item.read ? '已阅' : '未阅' }} </view> </view> </scroll-view> </view> </view> </template> <script setup> import { ref, onMounted } from 'vue'; const newsList = ref([]); const fetchData = () => { setTimeout(() => { newsList.value = [ { id: 1, title: '廉洁从业，从我做起', summary: '廉洁从业是每一位员工应尽的责任和义务，本文介绍了公司廉洁文化建设的相关要求和实践。', publishDate: '2024-09-10', read: true }, { id: 2, title: '加强反腐倡廉，构建阳光企业', summary: '公司持续加强反腐倡廉工作，推动形成风清气正的企业文化氛围。', publishDate: '2024-09-08', read: false }, { id: 3, title: '廉洁文化进班组，清风正气润人心', summary: '公司组织廉洁文化进班组活动，通过宣传、培训等方式提升员工廉洁意识。', publishDate: '2024-09-05', read: false } ]; }, 500); }; onMounted(() => { fetchData(); // 添加被动事件监听器（可选） setTimeout(() => { const scrollEl = uni.createSelectorQuery().select('.scroll-container'); scrollEl.boundingClientRect(data => { if (data) { console.log('滚动容器高度:', data.height); } }).exec(); }, 300); }); const navigateToDetail = (item) => { uni.navigateTo({ url: `/pages/IntegrityCulture/IntegrityCultureDetail/IntegrityCultureDetail?id=${item.id}` }); }; </script> <style scoped> /* 被动事件优化 */ scroll-view { touch-action: pan-y; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } .container { padding: 30rpx; background-color: #f9f9f9; height: 100vh; overflow: hidden; box-sizing: border-box; } .banner-section { margin-bottom: 40rpx; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); } .banner-image { width: 100%; height: 320rpx; display: block; } .title { font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 40rpx; } .news-list { background-color: #fff; border-radius: 16rpx; overflow: hidden; height: calc(100vh - 500rpx); min-height: 300rpx; } .scroll-container { height: 100%; } .news-item { padding: 30rpx; position: relative; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1rpx solid #eee; } .news-content { flex: 1; padding-right: 20rpx; } .news-title { font-size: 32rpx; font-weight: bold; color: #333; display: block; margin-bottom: 10rpx; } .news-summary { font-size: 28rpx; color: #666; display: block; margin-bottom: 10rpx; line-height: 1.5; } .news-date { font-size: 24rpx; color: #999; display: block; } .status-box { padding: 8rpx 16rpx; font-size: 24rpx; border-radius: 8rpx; min-width: 80rpx; text-align: center; } .status-box.read { background-color: rgba(76, 175, 80, 0.1); color: #4caf50; } .status-box.unread { background-color: rgba(244, 67, 54, 0.1); color: #f44336; } /* 移动设备优化 */ @media (max-height: 600px) { .news-list { height: calc(100vh - 450rpx); } } </style> 我想要news-list板块内部滚动不影响页面其他内容，同时去掉滚动条
最新发布
08-15
margin-bottom: 40rpx; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); flex-shrink: 0; /* 防止被压缩 */ } .banner-image { width: 100%; height: 320rpx; ...
苹果手机html标签不显示,关于苹果iPhone手机对页面margin属性无效的解决方法一（如有错误，请留言批评）...
weixin_30744613的博客
06-27 854
这个问题，是在给商城网站底部footer设置margin属性的时候发现的，先把出现问题的截图发出来看一下​安卓手机，打开正常​iphone6 p打开出现的问题(无视margin-bottom:60px)​​当然，在google浏览器移动端测试iphone6p，打开的也是没问题的(这说明什么问题呢？)​思索找寻了好久，也有反映margin不起作用的，改成padding就可以，但是改成padding在...
微信小程序margin-bottom失效
蘅潇嗜玉
08-20 1321
现象： 给页面底部元素设置margin-bottom 在iOS上失效 解决办法： 给外层元素（page）加padding-bottom
ios在webview上使用fixed无效
hua_ban_yu的博客
12-03 1518
使用ios提供的webview显示h5页面发现fixed定位的效果会随浏览器的滚动而隐藏，不会像普通浏览器那样可以进行定位。 解决方案： 把position:fixed 修改为position:sticky; position:sticky简介 position:sticky =position:relative+position:fixed的结合，当元素在屏幕内，表现为r...
解决Iphonex 底部按钮fixed,bottom:0 底部留白问题
我叫陈小皮。
08-02 6876
注意: 配合viewport-fit=“cover”使用 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1, user-scalable=0,viewport-fit=cover"> 解决方案： <div class="wrapper...
网页适配问题与解决方案
YANNINGXINYI的博客
06-08 2182
网页适配 iPhoneX，就是这么简单 淡逝奈成风吟 2020-06-08 19:19:44 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：
ios手机margin-bottom失效问题
mingquantingxue的博客
11-13 1766
问题 小程序中的页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone手机中margin-bottom会失效。 原因 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。 如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins
小程序margin-bottom在IOS里面不起作用的解决方法
小程序开发
08-22 591
将margin-bottom 改成 padding-bottom。小程序用margin-bottom在IOS手机失效问题。如何解决这个问题，可尝试用下面方法。
H5页面，遇到css样式不兼容部分ios机型，解决办法（No .1）
Allan_L的博客
06-19 1万+
问题： App有一个底部栏（要求：永远bottom：0），但是在部分页面，底部栏超出了屏幕的高度，所以，看上去好像是消失不见了一样。。思路：页面挂载的时候，判断一下offsetTop，如果大于当前屏幕的高度，就让其上移：translateY（上移动数值为：当前底部栏的offset - 页面的高度）...
h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）
热门推荐
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
07-09 1万+
方法一：JS判断 function isIphoneX(){ if(/iphone/gi.test(window.navigator.userAgent)){ /* iPhone X、iPhone XS */ var x=(window.screen.width === 375 && window.screen.height === 81...
button margin失效
05-24
例如，部分 iOS 设备可能会忽略 `margin-top` 和 `margin-bottom` 的设置[^4]。 --- ### 解决方案 以下是几种常见的解决方法，可以尝试逐一排查并解决问题： #### 方法一：调整 `display` 属性 将 `<button>` 的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值