前言

今天博主使用flex写个聊天框遇到个奇怪的问题,本来博主是打算聊天框使用flex:1来铺满屏幕,然后超出部分显示滚动条的,少数的时候很满意,可是当信息多了就会超出部分,按照博主的思路来说一半flex:1有剩余的会铺满,有多的会出现在设置overlow之后会出现滚动条。然而却并没有出现,来看看博主的代码。

代码

父级样式

display: flex;
flex-flow: column;

子级样式

flex: 1;

这样来说超出部分应该是有滚动条的,然而并灭有。

研究

首先博主在谷歌上找到一个博客flex布局 滚动条失效的解决方案,
按照他的来解决在子级上设置了height:0之后在电脑上看的确是没问题了,然而在安卓手机上就看不到内容,可能flex是兼容问题,在博主研究很久之后才发现只需要跟父级节点设置height:100vh就可以了,子节点无需设置height:0

延申

那么问题来了,什么是vh?
相对于视口的高度。视口被均分为100单位的vh,第一次看可能很难理解。咱们可以看成把一块蛋糕平均分成100快,而我height:100vh就表示我把父级这个100块蛋糕全部吃了,其实就是100%的意思。

标签: Flex

添加新评论