overflow和动态计算高度

简介: overflow和动态计算高度

人们总会找到某种带头人,把他供奉起来,培养成伟人……暴君就是这么来的;暴君最初都是以保护者的形象出现的。——柏拉图,《理想国》

首先是MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

其中对overflow进行了描述:

CSS 属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-xoverflow-y简写属性

重点在这里:

为使 overflow 有效果,块级容器必须有一个指定的高度(height或者max-height)或者将white-space设置为nowrap

那问题来了,我这里有一个折叠面板

我希望这里多个折叠面板每一项的头部都能显示在页面中,并且其子项能够适应屏幕高度和折叠情况变化

为了实现上面的效果,我们需要在每一个折叠面板子项中设置overflow-y:auto,然后给其设置height或者max-height

我们知道css中有个计算函数calc可以计算我们的高度,这里的卡片为了保证屏幕自适应,可以用其计算出我们这里所需的高度为100vh(屏幕可视区域高度)-其余占位高度(比如卡片上下的留白,卡片头部的高度等),最后需要除以这里的折叠面板数量3,但有个问题,这里不一定是3个,有可能是多个,使用vue动态渲染的,这样的话我们就只能在vue标签上指定高度

例如:

相关文章
|
8月前
|
容器
flex-grow 自适配宽度避免内容超出挤压两侧的最佳实践
flex-grow 自适配宽度避免内容超出挤压两侧的最佳实践
132 0
|
4月前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
122 2
StatusStrip如何设置高度
原理: 先将它的AutoSize设置为False,然后再设置它的高度。     参考文献 http://bbs.
884 0
DIV+CSS布局时, DIV的高度和宽度特性
这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%)、高度最小化,高度随着内容自动伸展;一般情况做网页的话,大部分都是固定了总体框架宽度的,每个模块的宽度基本上也都是固定的,所以div需要设一下宽度,如果内容也是相对固定不变的,...
711 0
|
8月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
59 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
Web App开发 前端开发
ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码
在ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码: 让Div自适应是一个比较常见的需求,可是这种需求在ie下是默认的,但在firefox下就不是默认的了,因为这两者的内容实现不是一样的,所以常常是满足这个浏览器,另一个浏览器又不满足了! 给需要自适...
701 0
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
874 1
|
前端开发 移动开发
<网页布局>解决margin-top塌陷,实现子元素动态改变父元素尺寸
1.伪类解决margin-top塌陷: 如果两个不浮动的盒子相互嵌套,对内部的盒子设置margin-top会导致属性被自动转移到外部的盒子上,导致内部盒子的margin-top设置失败最靠谱的解决方式是为父元素添加一个伪类: /*伪类解决margin-top塌陷*/ .
1050 0

热门文章

最新文章