From 26924ca719484e0df2fc119a047fca305972c224 Mon Sep 17 00:00:00 2001 From: HomeDash Bot Date: Sat, 12 Sep 2026 16:18:00 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E6=AD=A3=20mini=20?= =?UTF-8?q?=E9=A1=B5=E6=BB=9A=E5=8A=A8=E2=80=94=E2=80=94=E8=A1=A5=20flex?= =?UTF-8?q?=20=E9=93=BE=E6=9D=A1=20min-height:0=EF=BC=8C=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E4=BA=A4=E7=BB=99=E5=86=85=E5=AE=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 上一版只把 body 锁成 overflow:hidden，既没提供可滚动内层，也没让框收缩， 等于把超出视口的内容"藏起来"。用户直接指出：应当让框收缩到一屏刚好撑满。 根因：Dashy 的 DOM 链条是 .minimal-section-inner ← .item-group-container ← .minimal-home ← div ← div ← body 中间两层无名 wrapper 没有 min-height:0，flex 项无法压缩 → 容器被内容撑高， 既撑出页面（已锁住）又不产生内部滚动。 本版： - body(:has(.minimal-home)) 锁 100dvh，并把中间两层 wrapper 也设为 flex:1 + min-height:0 + max-height:100% + overflow:hidden（补齐链条） - 滚动显式交给 .minimal-home > .item-group-container（flex:1 + min-height:0 + overflow-y:auto + padding-bottom 84px 给底部悬浮件/备案号留净空） - .minimal-section-inner 不再自成滚动区（overflow:visible），避免双层滚动条 --- web/navi.css | 41 +++++++++++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/web/navi.css b/web/navi.css index de6ff24..2e649d7 100644 --- a/web/navi.css +++ b/web/navi.css @@ -713,39 +713,56 @@ html[data-theme] .minimal-headings-wrap .tab-scroll-btn { border-radius: 12px !important; } -/* ── mini 页：视口高度自适应 + 框内滚动 ── - 实测问题：.minimal-section-inner 是 max-height:none/overflow:visible， - 内容一多就把整页撑高，滚动落在页面上；而不同分组内容多少不同， - 于是"有的页面能滚、有的不能"，观感割裂。 - 做法：body 锁死视口高度不滚，页面主体改为纵向 flex， - 内容框 flex:1 + min-height:0 + overflow-y:auto —— 滚动统一发生在框内。 - 仅作用于含 .minimal-home 的页面（用 :has 限定），不影响首页/工作区。 */ +/* ── mini 页：一屏刚好撑满 + 框内滚动（修正版）── + 上一版只锁了 body 的 overflow，却没有可滚动的内层，也没让框收缩： + 结果内容被"藏起来"。根因是 flex 链条上有两层无名 wrapper（div ← div） + 没有 min-height:0，容器因此无法压缩、只会被内容撑高。 + 这一版把链条每一环都补齐，并把滚动显式交给内容框。 */ html[data-theme] body:has(.minimal-home) { height: 100dvh !important; + max-height: 100dvh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } +/* flex 链条上的中间 wrapper（Dashy 的 #app / 包装 div）必须允许压缩 */ +html[data-theme] body:has(.minimal-home) > div, +html[data-theme] body:has(.minimal-home) > div > div { + flex: 1 1 auto !important; + min-height: 0 !important; + max-height: 100% !important; + display: flex !important; + flex-direction: column !important; + overflow: hidden !important; +} html[data-theme] .minimal-home { flex: 1 1 auto !important; min-height: 0 !important; + max-height: 100% !important; display: flex !important; flex-direction: column !important; + overflow: hidden !important; } -/* 内容外框与内框都给到"可压缩 + 可滚动"，并给底部悬浮件/备案号留出净空 */ -html[data-theme] .minimal-home > .item-group-container, -html[data-theme] .minimal-home .minimal-section-inner { +/* 内容外框：吃掉剩余高度，自己滚 */ +html[data-theme] .minimal-home > .item-group-container { flex: 1 1 auto !important; min-height: 0 !important; + max-height: 100% !important; overflow-y: auto !important; + overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; padding-bottom: 84px !important; scrollbar-width: thin; } -/* 极窄/极矮屏：内容框内滚动尤其重要，额外收紧上下留白 */ +/* 内框不再自成滚动区（避免双层滚动条），只负责高度不满时撑开 */ +html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner { + min-height: 0 !important; + overflow: visible !important; + padding-bottom: 0 !important; +} @media (max-height: 560px) { - html[data-theme] .minimal-home .minimal-section-inner { padding-bottom: 64px !important; } + html[data-theme] .minimal-home > .item-group-container { padding-bottom: 64px !important; } } html[data-theme] .minimal-section-inner {