ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

一段十分丑陋的滚动列表(当父元素设置最大高度或者最大宽度,子元素设置百分比宽高不生效的问题)

2021-05-22 15:35:03  阅读:120  来源: 互联网

标签:flex 百分比 滚动 元素 高度 当父 设置


一段十分丑陋的滚动列表

背景:如图,该列表需要做成滚动视图,上下功能按钮不动,只滚动列表

可以看到这个大盒子是有个最大高度的,而且看起来貌似是生效的

image

实际上并不是的,我是用了弹性布局后它才变成我想要的样子

image

看起来效果实现了,但是现在它十分丑陋,因为它的子元素超出了最大高度,这你能忍?

image

如图,这就是他的子元素,真够猖狂的啊

image

于是设置flex:1,希望该货明白我的意思,可是它非但没动,而且还没动

image

于是我生气了,直接把它设置flex:0 , height:0。没想到这成了,看来该货吃硬不吃软

image

如上图 ,子元素和父元素大小一致,正常滚动。优雅。

原理:

当元素没有确定的高度时,其高度是由子元素高度之和决定的。

如果子元素在这种情况下设置百分比高度,是没有效果的,因为百分比高度是对于其父元素来计算的,父元素没有确定的高度,百分比理所当然的不会生效。

那么我们如何才能达到:父元素高度不够时自动撑开,而不会超过一个限度,同时它的子元素始终占它百分比大小呢?

就是 弹性盒子了:

首先给父元素设置为弹性盒子,然后给需要随其自身变化的子元素flex:1就可以了。

唯一的问题是我没搞懂最后为什么孙子元素flex0加上height0达到了我想要的效果,有懂的大佬请指教

标签:flex,百分比,滚动,元素,高度,当父,设置
来源: https://www.cnblogs.com/Kay-Larry/p/14798983.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有