fix(stocktake): 补 min-height:0,真正解决欢迎页按钮被裁不可达

上一轮只加了 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
      四条关键规则均已进入产物。
This commit is contained in:
yueli
2026-09-14 11:04:06 +08:00
parent 996ec43360
commit b7cdd5e58b

View File

@ -1854,18 +1854,25 @@ const goToVarianceReview = () => {
.idle-card { .idle-card {
flex: 1; flex: 1;
/* ★★ min-height: 0 是整套布局的关键,缺了它前面几轮都白改 ★★
flex 子项默认 min-height: auto —— 拒绝收缩到内容高度以下。于是卡片会
撑破 .app-container 的 100vh自己的 overflow-y 永远不会触发,最终被
body 上的全局 overflow: hiddensrc/style.css裁掉按钮既看不见、
也滚不到。
加上它,卡片被约束成「容器剩余高度」,内部滚动才真正生效。 */
min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* 刻意不用 justify-content: center —— flex 居中在内容超出容器时会把 /* 刻意不用 justify-content: center —— flex 居中在内容超出时会把上下两端
上下两端**同时裁掉**(经典陷阱),这就是小屏上「开始新盘点」按钮被 **同时裁掉**,居中改由子元素的 margin:auto 承担:内容不高时正常居中,
截掉一半的原因。改由子元素的 margin:auto 居中:内容不超高时正常居中, 超高时 auto 塌缩为 0从顶部开始排布并保留底部安全边距。 */
超高时 auto 塌缩为 0配合 overflow-y 可完整滚动到顶与底。 */
align-items: center; align-items: center;
text-align: center; text-align: center;
border: none; border: none;
border-radius: 0; border-radius: 0;
overflow-y: auto; overflow-y: auto;
padding-bottom: 40px; /* 底部留白,避免按钮贴着屏幕边缘 */ -webkit-overflow-scrolling: touch; /* 平板/iOS 惯性滚动 */
padding-bottom: 40px; /* 底部留白,按钮不贴屏幕边缘 */
} }
.idle-content { width: 100%; max-width: 400px; padding: 20px; margin: auto; } .idle-content { width: 100%; max-width: 400px; padding: 20px; margin: auto; }
/* 抽盘配置区是双栏,窄容器装不下,此时放宽欢迎页 */ /* 抽盘配置区是双栏,窄容器装不下,此时放宽欢迎页 */