jianf/HomeDash
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): 删除 v81 的高特异性 static 钉子，页脚统一固定贴底

Browse Source 
真凶（打印命中规则并按特异性排序后确认）：
 v81 引入了
   html[data-theme] body:has(.minimal-home) .navi-footer-host,
   html[data-theme] body:not(:has(.minimal-home)) .navi-footer-host { position: static !important }
 特异性 (0,11,4)~(0,11,5)，压过此后所有 fixed 规则 (0,4,4)，
 使 /workspace 页脚永远停在文档流位置：bottom=737 > 视口 720（第二行掉出视口）、
 页面被撑出滚动条。用户实测症状："工作区整体可以滑动""底栏只显示备案号""mini 底部看不到"。

本版：整段删除 v81（文档流方案），并以简单选择器统一
 .navi-footer-host / footer > .navi-footer 为 position:fixed; bottom:0，
 内容容器 #app 留 44px 净空避免遮挡。

教训：用 :not(:has(...)) 构造的"通用覆盖"会形成无法覆盖的高特异性钉子。
This commit is contained in:
HomeDash Bot
2026-09-12 20:00:47 +08:00
parent c77a1795a3
commit e9fab61a2e
1 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web/navi.css
View File

@ -2430,36 +2430,13 @@ html[data-theme] body .navi-footer > .navi-quote:nth-last-of-type(2) { grid-colu
html[data-theme] body .navi-footer > .navi-quote:last-of-type { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; }
html[data-theme] .navi-footer { grid-template-rows: auto auto !important; grid-auto-rows: 0 !important; }
/* ═══ v81：页脚回归文档流（用户：应在页面底部，不是悬浮于底部）═══
实测 v80：三视图的 .navi-footer-host / .navi-footer 均为 position:fixed + z-index:3，
属于"永远贴在视口上、盖在内容之上"的悬浮层；/workspace 还因此底部出血 8px。
改为文档流底部内容：
- position: static（回到正常流）→ 内容自然排列，滚动到页面最底才可见；
- 不再需要为它预留固定高度（去掉 margin-bottom 预留）；
- pointer-events 恢复 auto（不再是浮层，无需穿透）。 */
html[data-theme] body:has(.minimal-home) .navi-footer-host,
html[data-theme] body:not(:has(.minimal-home)) .navi-footer-host,
html[data-theme] .navi-footer-host {
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
z-index: auto !important;
margin: 0 !important; padding: 0 !important;
pointer-events: auto !important;
width: 100% !important;
height: auto !important; max-height: none !important;
background: transparent !important; border: 0 !important; box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
overflow: visible !important;
}
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer,
html[data-theme] .navi-footer {
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
z-index: auto !important;
}
/* 页脚不再是浮层 → 取消为其预留的底部空间 */
html[data-theme] .minimal-home > .item-group-container { margin-bottom: 0 !important; }
html[data-theme] body:has(.minimal-home) .minimal-section-inner { padding-bottom: 8px !important; }
/* v85 删除：v81 的"页脚回归文档流"整段。它引入了
html[data-theme] body:not(:has(.minimal-home)) .navi-footer-host { position: static !important }
其特异性高达 (0,11,4)~(0,11,5)，把此后所有 fixed 规则（0,4,4）全部压死，
导致 /workspace 页脚永远停在文档流位置（bottom=737 > 视口 720，
第二行掉出视口、页面被撑出滚动条）。用户实测："工作区整体可以滑动""只显示备案号"。
结论：文档流方案（v81-v83）不可取 —— 页脚在视口偏矮/内容偏多时必然掉出视口；
且用 :not(:has()) 这种高特异性选择器等于给页面钉上无法覆盖的规则。 */
/* ═══ v82：三视图页脚真正落到页面最底 + workspace 的 grid 生效 ═══
父链实测（v81）：
@ -2566,3 +2543,26 @@ html[data-theme] body:has(.minimal-home) > #app { padding-bottom: 44px !importan
html[data-theme] body:has(.minimal-home) .minimal-home > .item-group-container { margin-bottom: 0 !important; }
/* 固定层不参与文档高度 → 页面不应因此可滚 */
html[data-theme] body { overflow: hidden auto !important; }
/* ═══ v85：页脚固定贴底（统一、无高特异性钉子）═══
删掉 v81 那条 (0,11,x) 的 static 规则后，此处用简单选择器统一固定贴底：
三视图的 host / footer 一律 position:fixed; bottom:0；内容容器留 44px 净空。 */
html[data-theme] .navi-footer-host {
position: fixed !important;
left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
margin: 0 !important; padding: 0 !important; z-index: 3 !important;
width: 100% !important; height: auto !important; max-height: none !important;
pointer-events: none !important;
background: transparent !important; border: 0 !important; box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
overflow: visible !important;
}
html[data-theme] .navi-footer-host > .navi-footer { pointer-events: auto !important; }
html[data-theme] body #dashy footer > .navi-footer,
html[data-theme] body footer > .navi-footer {
position: fixed !important;
left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
z-index: 3 !important; margin: 0 !important;
}
html[data-theme] body #dashy > footer { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html[data-theme] body > #app { padding-bottom: 44px !important; }