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