使用 elementUI 的折叠面板如何在撑满高度时，里面的内容滚动？

Question

如图，我想要的效果是，如果打开内容过多，其余项贴在底部，里头的内容滚动，整体不滚动。
这里我是给里面的内容一个固定高度“实现”的，求助

<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="一致性 Consistency" name="1">
    <div>与现实生活一致</div> *100
  </el-collapse-item>
  <el-collapse-item title="反馈 Feedback" name="2">
    <div>控制反馈</div> *100
  </el-collapse-item>
  <el-collapse-item title="效率 Efficiency" name="3">
    <div>简化流程：</div> *100
  </el-collapse-item>
  <el-collapse-item title="可控 Controllability" name="4">
    <div>用户决策</div> *100
  </el-collapse-item>
</el-collapse>

Answer 1

http://www.lilnong.top/static/html/elementui-collapse-maxheight100vh.html

使用楼上的方案来实现的，获取屏幕高度，然后获取每一个itemTitle的高度，剩下的就是itemContent的高度。

当然，如果要用在项目中，还是需要加一些限制条件的

computedItemHeight(){
    return window.innerHeight - Array.from(document.querySelectorAll('.el-collapse-item'))
        .reduce((s,el)=>{
            return s+el.children[0].offsetHeight
        }, 0)
}

---

更新于：2020-12-30 13:55:00

基于 flex 布局等纯 css 实现了水平的效果。晚点看看垂直的能搞不
https://www.lilnong.top/static/html/elementui-collapse-maxheight100vh-flex-row.html

---

更新于：2020-12-30 14:20:00
基于 flex 布局等纯 css 实现的垂直的效果，也搞出来了。美滋滋的收工
https://www.lilnong.top/static/html/elementui-collapse-maxheight100vh-flex-col.html