From e9fab61a2e27d04ccdf3b90f7b18d88048174f0d Mon Sep 17 00:00:00 2001 From: HomeDash Bot Date: Sat, 12 Sep 2026 20:00:47 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=88=A0=E9=99=A4=20v81=20=E7=9A=84?= =?UTF-8?q?=E9=AB=98=E7=89=B9=E5=BC=82=E6=80=A7=20static=20=E9=92=89?= =?UTF-8?q?=E5=AD=90=EF=BC=8C=E9=A1=B5=E8=84=9A=E7=BB=9F=E4=B8=80=E5=9B=BA?= =?UTF-8?q?=E5=AE=9A=E8=B4=B4=E5=BA=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 真凶（打印命中规则并按特异性排序后确认）： 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(...)) 构造的"通用覆盖"会形成无法覆盖的高特异性钉子。 --- web/navi.css | 60 ++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/web/navi.css b/web/navi.css index a79e8ea..877684a 100644 --- a/web/navi.css +++ b/web/navi.css @@ -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; }