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

css现在已经有相关方法可以判断高度了，那就是CSS容器查询。不过这个特性太高级了，目前几乎还不能实战，我们这次介绍一种更加传统的方式。

 

 

在平时开发中，经常会碰到一些需要判断高度的场景，比如当超过一定高度后，需要自动出现展开折叠按钮，如下：

 

 

传统的思路肯定是通过JS去动态计算容器的高度，但这样就涉及到加载时机的问题，获取早了可能元素还没渲染好，晚了又会有明显的卡顿感，或者会引起页面的闪烁。

那有没有仅通过CSS的方法呢？

当然也是有的！要实现上面这个例子的效果，需要解决以下几个问题：

1. 如何判断不同的高度？
2. 如何在不同的高度下展示隐藏点击按钮？
3. 如何点击切换？

花几分钟一起看看吧