flex布局在iOS上出现高度塌陷

最新推荐文章于 2023-05-18 16:50:36 发布
原创 最新推荐文章于 2023-05-18 16:50:36 发布 · 1.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flex #ios #css

本文探讨了在iOS设备上使用Flex布局时遇到的高度塌陷问题，该问题出现在某些苹果设备上，当子元素总高度超过父元素时导致。解决方法是通过设置CSS属性`flex-shrink: 0;`来防止元素收缩，从而避免高度坍陷。此技术细节对于前端开发者尤其是关注跨平台兼容性的人员至关重要。

flex布局在iOS上出现高度塌陷

问题： 常规盒子布局，在多数苹果机和安卓机上可以正常显示，在部分iOS上出现高度塌陷

原因： 子元素高度加起来超过了父元素高度，从而触发坍缩

解决办法： 给会出现高度坍缩的元素加上这个CSS flex-shrink: 0;

浮动布局中的高度塌陷问题
weixin_42444219的博客
06-13 497
高度塌陷： 在浮动布局中，父元素的高度默认被子元素撑开，但当子元素发生浮动时，会从文档流中脱离，此时无法撑起父元素的高度，导致元素的高度丢失，影响页面布局，一般将这种情况叫做高度塌陷。 处理方式： 为父元素设置高度height，此时高度不再被内容撑开，但会造成 子元素溢出 或 父元素空白。 为父元素开启BFC。 BFC： 全称Block Formatting Context，翻译为块级格式化上下文。它是一个独立的布局环境，或是布局容器，容器内的子元素不会影响到外部。 元素开启BFC后的特点： 开启BF
flex，内部元素高度塌陷
peade的博客
08-19 2649
使用flex布局, 内部元素不是和父元素一样高，会出现高度不够。在有些情况下，与预期的效果不一致。 在子元素上，用上下面这一句就可以实现了。 align-self: stretch;
解决高度塌陷4种方法
qq_46342447的博客
12-03 3631
解决高度塌陷4种方法
Flex 子元素高度塌陷
sinat_36539161的博客
08-15 7575
先看看页面整体布局： · wrap 弹性布局，分 head、main； · head 弹性布局，分 h2、i ； 问题：head 高度塌陷。 高 32px，变成：24.03px（PS里：chrome是23px，IE是24px）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
弹性盒子 Flex 子元素高度塌陷
weixin_30794491的博客
01-25 2146
弹性盒子 Flex 子元素高度塌陷 数据来源：https://blog.youkuaiyun.com/sinat_36539161/article/details/81663971 先看看页面整体布局：· wrap 弹性布局，分 head、main；· head 弹性布局，分 h2、i ；问题：head 高度塌陷。高 32px，变成：24.03px...
float：right ios不生效
08-01
在iOS设备上，`float: right;` 样式不生效通常是由于父容器或兄弟元素的布局方式导致的。根据提供的引用信息[^1]，可以通过以下方法解决这一问题： ### 解决方法 1. **为父容器设置 `position: relative;`** 在...
uniapp 跳转后display: flex;异常
最新发布
11-25
Flex布局要求父元素有明确的尺寸（宽度或高度），否则布局可能塌陷。 - **解决方法**： - **显式设置父元素尺寸**：使用`width: 100%; height: 100%;`或具体数值（如`width: 750rpx`）。 - **使用rpx单位**：在...
scroll-view nvue超过屏幕高度无法滚动
06-12
-在nvue中，可能需要使用flex布局来正确计算高度。-有时，需要设置样式如height或flex属性。参考引用[2]，它提到nvue中横向滚动的问题，并建议使用flex-direction:row。类似地，纵向滚动可能需要设置flex-direction:...
采用flex的方法，盒子与盒子有边距，怎么让他们一行显示
04-28
好的，用户现在的问题是想要使用Flexbox布局让两个带有边距的div在一行显示。我需要结合之前的对话历史和用户提供的引用来给出合适的回答。 首先回顾之前的对话，用户之前询问的是如何让两个div排在一行，我给出了...
如何解决v–if中组件不显示后界面布局变化
04-04
好的，我现在需要解决用户的问题：当使用v-if导致组件不显示时，界面布局发生变化。用户希望知道如何解决这个问题。首先，我需要理解这个...4. **移动端适配**：在 iOS 设备上注意 `position: fixed` 元素的布局影响
flex两个盒子高度塌陷解决办法
qq_37225650的博客
01-10 882
https://www.jianshu.com/p/92395148ff25
flex 高度在ios撑不开的问题
与你清欢
11-11 1879
问题：写了一个flxed布局，在flex下高度撑不开的问题，找了很久都找不到结果。 最后还是找到了答案：“flex布局撑开的最大高度不会大于父级flex元素设置的高度！” 解释一下： <div style="height:400px;overflow-y:scroll"> <div style="display:flex;flex-direction:column"> <div style="height:100px">1</div> ..
css解决高度塌陷的方法
空之境界
03-01 342
一.BFC的概念 BFC，全称Block Formatting Context，翻译成中文就是 块格式化上下文，Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context ...
苹果手机H5页面元素内容高度设置无效
m0_61233367的博客
09-07 851
在该样式中加入 flex-shrink: 0; 试一试。
低版本ios、安卓手机 css的flex布局兼容问题
han_calligrapher的博客
02-01 1942
在iphone5手机中，flex布局失效。解决方案如下： 在package.json中加上： "browserslist": [ "&gt; 1%", "last 2 versions", "not ie &lt;= 8", "ios &gt;= 3", "android &gt;= 2" ] 在vue1.
【css】flex 布局
m0_59755550的博客
08-11 774
css+浮动+高度塌陷现象
flex布局上出现的问题，给出的解决方案
m0_48893127的博客
05-07 819
flex布局上出现的问题，给出的解决方案，后期再更新
高度坍塌问题--BFC模式解析
xiaowei的博客
11-10 3370
问题引起是2016IFE春季问题的任务三，总的父元素parent包含三个浮动的子元素，容器的高度不能自动伸长以适应内容的高度，出现了高度坍塌问题。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高度坍塌问题-BFC模式解析</title> <style> .parent
解决高度塌陷的方法
Z_An_An_的博客
05-18 288
高度塌陷：父子关系中，父元素没有设置固定高度，子元素浮动，父元素会产生高度变化。5.父元素开启flex布局：display:flex;2.给子元素添加清除浮动：clearn:both；3.给父元素添加overflow:hidden；4.万能清除浮动法：给父元素添加。1.给父元素添加固定高度。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值