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

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;
}