使用 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

Answer 2

看你的示意图应该是手机版的页面。element-ui其实并不适用手机版，element的手机版应该是mint-ui。但既然用了，就事论事。
解决办法的思路还是基于固定高度来实现。因为一大段文字的高度其实不可控。
首先设置每个el-collapse-item的高度h。通过折叠菜单的个数n。可以计算出单个菜单展开后的其他el-collapse-item的总高（n-1）*h。
如果还有其他的内容，比如顶部，得到他的高度toph。
所以展开的文字部分的高度设置为height:clac(100% - (n-1)*h - toph ); overflow:hidden;

如果外面不想要滚动条，就可以将外部div的css设置overflow:hidden。
这样就基本可以实现了。