传递内容面板的最小高度#

.content-panel 已根据内容顶部位置计算视口内的剩余高度，但由于 .content-panel 与 #main-grid 之间还有一层容器， min-height 不会默认传递给子元素。进而导致 Footer 组件无法利用视口内的剩余空间。因此，需要将最小高度逐层传递到实际负责布局的 #main-grid 。

1
<div class="relative min-h-[inherit] ...">
2
  <div id="main-grid" class="... min-h-[inherit] ...">

• 第一处 min-h-[inherit] ：中间容器继承 .content-panel 的最小高度。
• 第二处 min-h-[inherit] ： #main-grid 继续继承中间容器的最小高度。

这里使用最小高度而不是固定高度，目的是使短页面至少占满视口剩余区域，长页面仍可随正文自然增长。

使用 Grid 分配剩余高度并定位 Footer#

仅让 #main-grid 占满视口剩余高度，还不会自动把 Footer 组件推到底部。普通内容仍会从顶部依次排列，并将多余空间留在 Footer 组件之后。同时，移动端底部组件是可选内容，侧边栏数量也会随页面和配置变化，如果完全依赖 Grid 自动排列，Footer 可能进入用于吸收剩余空间的行。因此，需要同时定义响应式 Grid 行结构，并明确 Footer 在其中的行位置。

1
<div
2
  id="main-grid"
3
  class="... grid-rows-[auto_1fr_auto] md:grid-rows-[1fr_auto] ..."
4
>
5
  ...
6
  <div class={`${footerClassName} row-start-3 md:row-start-2`}>
7
    <Footer></Footer>
8
  </div>
9
</div>

移动端分为三行：正文使用第一行，移动端底部组件或剩余空间使用第二行，Footer 使用第三行。第二行的 1fr 会吸收正文之外的剩余高度， row-start-3 则确保 Footer 始终从第三行开始。

平板和桌面端分为两行：正文与侧边栏使用第一行，Footer 使用第二行。第一行的 1fr 吸收剩余高度，第二行的 auto 仅保留 Footer 实际需要的高度， md:row-start-2 则将 Footer 固定在第二行。

原有的 footerClassName 继续负责 Footer 的列位置。当正文较短时， 1fr 将 Footer 推到视口底部；正文较长时，Grid 随内容增长，Footer 继续排列在完整内容之后。

恢复移动端 Grid 布局#

移动端原有样式将 .mobile-no-sidebar 强制设为 display: block !important ，会覆盖 #main-grid 的 display: grid 。如果继续保留，前面设置的 Grid 行结构、 1fr 和 Footer 行号都会失效。因此，需要删除冲突的 display 声明，并继续保留原有宽度规则。

更新后的移动端样式如下：

1
.mobile-no-sidebar {
2
  width: 100% !important;
3
}

删除覆盖后，移动端的 grid-rows-[auto_1fr_auto] 、 1fr 和 row-start-3 才能生效，其他移动端宽度设置保持不变。