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

fix(ui): 页脚贴住页面最底 —— 消除 #app 吞掉剩余空间

Browse Source 
实测（滚到最底时的 host.bottom / 文档高）：
  /         720 / 720  → 0px ✓
  /minimal  717 / 720  → 余 3px
  /workspace 674 / 720 → **余 46px**
根因：body 为 display:flex/column，其中 #app 是 flex:1 1 auto，
吃掉全部剩余高度，使页脚只能排在 #app 之后的中途位置。
修法：body 直接含 .navi-footer-host 时令 #app 改为 flex:0 0 auto（不再伸展），
页脚用 margin-top:auto 落到最底；并清掉 minimal 内容链末尾的余量。
This commit is contained in:
HomeDash Bot
2026-09-12 19:38:12 +08:00
parent b017c3a4b8
commit cb82a938f6
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/navi.css
View File

@ -2507,3 +2507,24 @@ html[data-theme] body #dashy > footer > .navi-footer {
}
/* ④ minimal：host 已是 body 子项，用 margin-top:auto 让页脚贴页面最底 */
html[data-theme] body:has(.minimal-home) > .navi-footer-host { margin-top: auto !important; }
/* ═══ v83：页脚贴住页面最底（消除 #app 吞掉剩余空间）═══
实测（滚到最底）：
/ host.bottom=720 = 视口高 → 距底 0px ✓
/minimal host.bottom=717，文档 720 → 余 3px（可接受但未归零）
/workspace host.bottom=674，文档 720 → **余 46px**
根因：body（display:flex; flex-direction:column）的 #app 为 flex:1 1 auto，
会吃掉全部剩余高度，使后面的 .navi-footer-host 只能排在 #app 之后的中途。
修法：当 body 直接含 .navi-footer-host 时，让 #app 不再弹性伸展（flex:0 0 auto），
页脚即可落在页面最底；minimal 的 3px 来自 #app 之外的一点点余量，一并归零。 */
html[data-theme] body:has(> .navi-footer-host) > #app {
flex: 0 0 auto !important;
}
html[data-theme] body:has(> .navi-footer-host) > .navi-footer-host {
margin-top: auto !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* minimal：内容链最后一个容器不留底部余量 */
html[data-theme] body:has(.minimal-home) > .navi-footer-host { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html[data-theme] body:has(.minimal-home) #app > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }