当前位置：首页 > news >正文

【CSS】---- CSS 实现超过固定高度后出现展开折叠按钮

news 来源：原创 2025/6/10 14:58:29

1. 实现效果

输入图片说明

2. 实现方法

使用 JS 获取盒子的高度，来添加对应的按钮和样式；
使用 CSS 的浮动效果，参考CSS 实现超过固定高度后出现展开折叠按钮；
使用容器查询 – container 语法；
使用 clamp 函数进行样式判断。

3. 优劣分析

JS 需要在内容加载完成后来进行获取高度进行判断；
CSS 的浮动首先需要你理解浮动的一些特殊特性，还需要添加一些辅助样式属性；
容器查询需要设置容器的最开始的固定高度，目前没有尝试；
本文采用的方法，使用 clamp 函数判断显示与否展示按钮。

4. 创建基础的 DOM

<div class="rui-flex-content"><div class="rui-container"><div class="rui-fwb">内容超出限制</div><input class="rui-content-check" type="checkbox" id="rui-pre" hidden /><div class="rui-content"><pre class="rui-text">
.rui-flex-content {display: flex;font-size: 20px;justify-content: space-around;
}
.rui-fwb {font-weight: bold;
}
.rui-content {--max-h: 200px;margin-top: 15px;width: 400px;max-height: var(--max-h);overflow: hidden;border-radius: 4px;outline: 2px dashed royalblue;position: relative;
}
.rui-content::before {content: '';display: block;position: absolute;bottom: clamp(-40px, calc(100% - var(--max-h)), 1px);left: 0;width: 100%;height: 40px;background-image: linear-gradient(to top, #fff, transparent);
}
.rui-text {white-space: pre-wrap;box-sizing: border-box;width: 100%;padding: 10px 15px;line-height: 1.1;margin: 0;font-size: 14px;color: #232323;
}</pre><label for="rui-pre" class="rui-btn"></label></div></div><div class="rui-container"><div class="rui-fwb">内容未超出限制</div><input class="rui-content-check" type="checkbox" id="pre" hidden /><div class="rui-content"><pre class="rui-text">.rui-content{width: 400px;max-height: 200px;overflow: hidden;border-radius: 4px;outline: 2px dashed royalblue;}</pre><label for="pre" class="rui-btn"></label></div></div></div>

5. 设置容器的样式

.rui-flex-content {display: flex;font-size: 20px;justify-content: space-around;
}
.rui-fwb {font-weight: bold;
}
.rui-content {--max-h: 200px;margin-top: 15px;width: 400px;max-height: var(--max-h);overflow: hidden;border-radius: 4px;outline: 2px dashed royalblue;position: relative;
}
.rui-text {white-space: pre-wrap;box-sizing: border-box;width: 100%;padding: 10px 15px;line-height: 1.1;margin: 0;font-size: 14px;color: #232323;
}

6. 基础效果

输入图片说明

7. 添加底部的渐变

7.1 实现分析

使用 ::before 伪元素实现过渡的渐变效果；
使用 linear-gradient(to top, #fff, transparent) 做白色到透明的渐变背景；
使用 clamp 计算渐变的定位底部位置。

7.2 实现样式

.rui-content::before {content: '';display: block;position: absolute;bottom: clamp(-40px, calc(100% - var(--max-h)), 0px);left: 0;width: 100%;height: 40px;background-image: linear-gradient(to top, #fff, transparent);
}

7.3 实现效果

输入图片说明

7.4 注意

此处在盒子小于规定的最大尺寸200px时，隐藏渐变效果的方法是将渐变定位到盒子外，用overflow:hidden进行隐藏；
也就是 clamp(-40px, calc(100% - var(–max-h)), 0px) 句代码的判断定位，但是这个条件判断存在一个问题，这个条件判断小于-40px就取-40px，大于0px就取0px，问题是如果值在-40px到0px之间时，出现线性设置bottom的值，这就不符合我们这里的显示隐藏的需求。

7.5 bug 效果

输入图片说明

这里为了看到效果，直接将渐变颜色直接设置为黑色；
可以看到当盒子的高度是175px时，计算bottom的值就是 175px - 200px = -25px，而-25px处于-40px到0px之间，因此这个时候bottom的值就是 -25px，所以出现了一半。

7.6 实际需要的效果

我们实际需要的效果是当盒子的高度小于200px时，直接将渐变定位到盒子外隐藏，大于200px时，直接取0px直接定位在盒子的底部，上边 clamp(-40px, calc(100% - var(–max-h)), 0px) 这个公式其实已经满足我们大部分需求，现在的问题就是在盒子的高度在160px到200px之间时的取值，不符合我们的需求。我们的需求是在盒子高度在 160px到200px 之间，bottom 的值也需要是 -40px，这个问题该如何解决呢？

7.7 解决办法

盒子高度在 160px到200px 之间，bottom 的值就在 -40px到0px之间取值。但是我们需要的是这个时候bottom的值是-40px，如何解决呢？将当前bottom的值乘以一个基础系数，只要最后得到的结果小于-40px就可以，当然为了处理-1px到0px之间的小数，建议这个系数最好大于1000，这个时候比如盒子高度198px，bottom的值就是 (198px - 200px)*1000 = - 2000px这个结果和-40px比较，所以取值-40px，就能满足我们的需求。

7.8 解决后效果

输入图片说明

这个时候就可以看到盒子高度 174px 时，下边的渐变遮罩层就隐藏了，满足开发需求。

7.9 优化后样式

.rui-content::before {content: '';display: block;position: absolute;bottom: clamp(-40px, calc(calc(100% - var(--max-h)) * 1000), 0px);left: 0;width: 100%;height: 40px;background-image: linear-gradient(to top, #fff, transparent);
}

8. 添加隐藏展示按钮

8.1 样式代码

.rui-btn {width: 100px;text-align: center;position: absolute;left: calc(50% - 50px);bottom: clamp(-40px, calc(calc(100% - var(--max-h)) * 1000), 0px);cursor: pointer;
}
.rui-btn::after {content: '↑';display: block;height: 40px;line-height: 40px;text-align: center;transition: 0.2s all;
}

8.2 说明

按钮的定位和遮罩层一样，在小于200px时不显示，超出200px后就展示按钮，所以定位也使用 clamp(-40px, calc(calc(100% - var(–max-h)) * 1000), 0px) 进行计算。

8.3 效果

输入图片说明

9. 添加按钮的事件样式控制

9.1 说明

使用 rui-btn:hover::after 控制按钮 hover 的时候改变字体颜色；
使用 + 选择器在 input 选中时，控制盒子的高度自适应；
使用 + 选择器将底部的按钮箭头换方向；
使用 + 选择器将底部的渐变遮罩层隐藏。

9.2 样式实现

.rui-btn:hover::after {color: royalblue;
}
.rui-content-check:checked + .rui-content {max-height: fit-content;
}
.rui-content-check:checked + .rui-content .rui-btn::after {transform: rotate(180deg);
}
.rui-content-check:checked + .rui-content::before {opacity: 0;
}

9.3 效果

输入图片说明

10. 最终效果

输入图片说明

11. 总结

学习使用 CSS 函数 clamp 函数，此函数不但能作为区间取值，还可以作为一种判断；
此效果采用的纯 CSS 实现，减少了 JS 操作判断；
需要待解决问题，就是临界值 200px 的时候，刚好 200px 不应该显示按钮，超出200px才显示，这个目前还在思考解决办法。

1. 实现效果

2. 实现方法

3. 优劣分析

4. 创建基础的 DOM

5. 设置容器的样式

6. 基础效果

7. 添加底部的渐变

7.1 实现分析

7.2 实现样式

7.3 实现效果

7.4 注意

7.5 bug 效果

7.6 实际需要的效果

7.7 解决办法

7.8 解决后效果

7.9 优化后样式

8. 添加隐藏展示按钮

8.1 样式代码

8.2 说明

8.3 效果

9. 添加按钮的事件样式控制

9.1 说明

9.2 样式实现

9.3 效果

10. 最终效果

11. 总结

相关文章：