【Dv3Admin】FastCRUD统一调整Tab操作

后台表单弹窗里接入多 tab 页面后，常见问题不是切换失败，而是内容区高度跟着 tab 内容量波动，弹窗外层一会儿被撑高，一会儿又被收窄。表现通常就是底部按钮上跳、视觉断层明显、编辑区和空白区对不齐。

这篇内容围绕 fast-crud 表单弹窗这一段样式处理展开，重点拆开弹窗外层高度锁定、内容区滚动处理、footer 保持显示这几个点，目标是让切 tab 之后始终维持统一高度，不再按内容多少自动缩小。

需求解析

当前材料对应的是 fast-crud 表单弹窗场景，处理对象是.el-dialog.fs-form-wrapper。使用场景很明确，tab 内部内容多少不一致时，弹窗整体高度不能跟着收缩，否则会导致同一个表单在不同 tab 间产生明显跳动，页面观感也会被打断。

这里的处理不是修改单个 tab，而是直接锁定弹窗外层最小高度，再把内容区内部滚动去掉，让整个弹窗始终维持一个稳定的可视区域。需要注意的是，这一步不能省略，否则会导致切到内容较少的 tab 时弹窗高度被内容反向压缩。

界面效果材料如下，图片链接按原样保留。

后台表单打开后，当前页签内容较多，弹窗会先以主内容区的高度呈现。这个状态下最容易看出表单主体、tab区域和底部操作区的相对位置，也是后续判断高度是否稳定的参照基线。

切换到内容较少的页签后，如果没有对弹窗外层做统一高度约束，表单容器通常会跟着内容一起缩短。这样会让底部区域上移，tab 切换前后的视觉落差非常明显，页面观感也会被打断。

加上这段样式之后，再切到内容较少的页签，弹窗外层仍然保持原来的整体高度，不会因为内部内容减少而收缩。这样处理后，tab区域、内容区和底部操作区始终处在稳定位置，表单切换时的跳动问题就能收住。

功能实现

定位对象是 fast-crud 表单弹窗样式，目的说明是锁定弹窗整体高度，保证切 tab 时始终维持统一外层尺寸。

<style>/* fast-crud 表单弹窗：锁定整体高度，不随 tab 缩小 */.el-dialog.fs-form-wrapper{min-height:90vh;/* ⭐ 核心：锁住弹窗最小高度 */max-height:96vh;/* 防止顶屏 */margin-top:2vh;}/* 内容区：不做内部滚动 */.el-dialog.fs-form-wrapper .el-dialog__body{overflow:visible;}/* footer 正常显示 */.el-dialog.fs-form-wrapper .el-dialog__footer{padding-top:10px;}</style>

关键点在于高度控制不放在 tab 内容块，而是直接放在.el-dialog.fs-form-wrapper外层，否则会导致切换内容较少的 tab 时整体高度继续收缩。

这段样式里的关键参数可以直接拆开看，定位和作用都比较明确。

从效果链路来看，这组样式处理的核心并不复杂，真正起决定作用的是最外层高度约束和内容区滚动策略。

结合材料里的三张图，这段样式解决的是同一个弹窗在不同 tab 之间的高度一致性问题。内容较多时，弹窗按设定高度承载；切到内容较少的 tab 时，外层不会因为内部内容减少而缩小。需要注意的是，.el-dialog__body这里如果继续保留内部滚动，视觉上就容易把统一高度效果打散。

总结

这段处理的关键设计点，在于把高度控制权从 tab 内容区收回到弹窗外层，通过min-height锁住表单弹窗的基础高度，再配合max-height和margin-top收住整体可视范围，结构简单，但效果非常直接。

现有方案已经能解决切换 tab 时高度抖动的问题，可优化空间主要集中在具体数值适配上。不同页面可视区域不同，90vh和96vh这组值并不是固定答案，实际项目里可以按弹窗密度继续微调，但外层锁高这个思路不需要改变。

放到后台系统里看，这种处理最大的价值不是样式好看，而是把表单交互稳定下来。统一高度之后，tab 切换更平滑，底部操作区更稳定，维护时也更容易定位问题，对页面一致性和可维护性都有明显帮助。