0481f917ee920f3347b1de28c94fea519076de8e
前几轮都在 .idle-card 内层打转(min-height:0 / overflow / padding / 去居中),
全都没打到点上。真根因在页面容器**之外**:
.app-wrapper { height:100vh; overflow:hidden } App.vue
.app-content { flex:1; min-height:0; overflow:hidden } ← 高度 = 100vh − 90px
.app-main { position:relative } ← 无高度
.app-container { height:100vh } ← 就是本页
App.vue 里 .app-header 是 60px、.app-footer 是 30px,所以 .app-content 的实际
高度是 100vh − 90px。而本页容器写死 height:100vh,**比父容器高出整整 90px**,
超出的那一截被 .app-content 的 overflow:hidden 裁掉 —— 【开始新盘点】按钮
恰好就在那一截里,所以看不见也滚不到(滚动条属于被裁掉的那部分)。
改法:height 改为 calc(100vh - 60px - 30px),两个高度提成 CSS 变量并注明
对应 App.vue 的哪个类,便于外壳改动时同步。
为何不用 height:100%:.app-main 是 auto 高度,百分比无从解析,会退化成 auto。
同时保留前几轮的成果(它们各自都是对的,只是不足以单独解决问题):
- .idle-card { min-height:0; display:block; overflow:hidden auto }
- .idle-content { margin:0 auto; padding:20px 20px 60px }
- .scope-columns 高度 380 → 260,再省 120px
Description
No description provided
Languages
Python
70.2%
CSS
14.9%
Vue
7.6%
HTML
4.2%
TypeScript
3.1%