b7cdd5e58b21f7f124e4dec46849bda9d85a4d8c
上一轮只加了 overflow-y: auto 和 padding-bottom,没有生效。完整根因链:
html,body { height:100%; overflow:hidden } ← src/style.css:61 全局裁剪
#app { height:100% }
.app-container { height:100vh; flex column } ← 自身无 overflow
.idle-card { flex:1; overflow-y:auto } ← 缺 min-height:0
flex 子项默认 min-height: auto,会**拒绝收缩到内容高度以下**。于是卡片被内容
撑破 100vh 容器,向上冒泡到 body 的 overflow:hidden 被裁掉 —— 卡片自己的
overflow-y 永远不会触发(它从没比内容矮过),所以按钮既看不见也滚不到。
补上 min-height: 0 后,卡片被约束为「容器剩余高度」,内部滚动才真正生效;
配合子元素的 margin:auto,内容不高时仍居中,超高时从顶部排下且保留
40px 底部安全边距。另加 -webkit-overflow-scrolling: touch 让平板惯性滚动。
注意:没有采用「把 .app-container 改成 overflow-y: auto」的方案 ——
该容器与扫码页的 .active-card 共用,改动会波及扫码态的整屏布局。
本次把修复严格限制在 .idle-card 内。
校验: style 块编译通过;min-height:0 / padding-bottom:40px / margin:auto
四条关键规则均已进入产物。
Description
No description provided
Languages
Python
70.2%
CSS
14.9%
Vue
7.6%
HTML
4.2%
TypeScript
3.1%