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 {