# 28: 外壳填满所在容器，而不是硬用 100vh

**What to build:** `.cockpit-shell` 原先写死 `height: 100vh`。宿主布局一旦在页面顶部留出页头、或把 `/cockpit` 放进比视口矮的容器里（预演站是 54px 页头；将来 qiankun 主应用也可能套壳），外壳就被挤出容器底部 54px：底部内容看不见，容器还多出一条纵向滚动条。改成填满**可用容器**，让驾驶舱在任何宿主下都铺满可用区域。

Blocked by: 01

Status: resolved
Labels: ready-for-agent

> 请勿据标签重复接单：本票已完成并有验证记录，`Labels` 保留只是为了让面板不把它退化成 `needs-triage`。

## 环境口径（维护者 2026-09-16 澄清）

**真实启动路径是 `yarn dev`**（= `fes dev` → `.fes.js`：`layout.navigation: null`，页面无页头）；**真实应用环境不使用 predev 启动服务**。`yarn pre.dev` / `pre.dev.one` 是 TvT 预演站布局（`navigation: 'top'` + `isFixedHeader`，顶部多 54px 固定页头），只用于预览插件，不是产品路径。

本票最初把验收写成「predev 演示环境下……」，那是**框错了环境**：验收改以真实路径为准（见下），predev 那条几何只作为「宿主套壳」的等价复现手段保留在证据里。本票的剩余价值因此落在两点：真实路径下不得有回归；将来 `/cockpit` 被 qiankun 主应用或别的前端壳包住时，外壳仍要铺满可用区域而不是溢出。

## 依赖与事实

- 走查 A12（铺满视口）在预演站环境下红、在 `.fes.js`（`yarn dev` / `yarn build`）环境下绿；两次走查数据与根因定位见 [06](06-cockpit-static-assets.md) 的「关于走查 A12 的环境差异」。
- 页头来源：`.fes.predev.js` / `.fes.predev.one.js` 的 `layout.navigation: 'top'` + `isFixedHeader: true`；`.fes.js` 是 `navigation: null`，`src/.fes/plugin-layout/views/BaseLayout.vue` 落到 `v-else`，只渲染 `<FMain><router-view /></FMain>`。
- 走查脚本已加 `pageHeaderH` 字段与「用 `yarn dev`，别用 `yarn pre.dev`」的前置条件说明，可用它判断当前跑在哪个环境。

## 验收

- [x] **真实启动路径 `yarn dev`**（产品构建为 `fes build`）下：页面无纵向滚动、外壳铺满视口、`main.bottom <= 视口高`、中央一张图吃掉剩余宽高。
- [x] 宿主套壳（顶部有页头，例如将来 qiankun 主应用的前端壳）时外壳跟着容器变矮、底部不被裁切——用等价复现验证（见证据 B）。
- [x] `.fes.js` 环境（`yarn dev`）下走查 A12 仍绿。
- [x] 改动落在驾驶舱模块内，不靠全局路由配置改布局（`.fes.js` 的 `router.routes` 会关掉整套文件路由，见票 01 的约束）。
- [x] 窗口 resize 后仍贴合，不得只在挂载时算一次。
- [x] 走查 A12 绿、`pageHeaderH` 与几何自洽。

## 进度：100%

### 已实施

`src/modules/cockpit/CockpitShell.vue` 两处，**只动这一个文件**（没碰路由、`.fes.js` 或宿主布局）：

- `.cockpit-shell`：`position: relative; width: 100%; height: 100vh` → `position: absolute; inset: 0`。贴着最近的定位容器：宿主留了页头时容器矮，外壳就跟着矮；没有定位祖先时按规范落回初始包含块（＝视口），所以 `yarn dev` 下仍是铺满视口。resize 由 CSS 自己跟随，**没有**挂载时测量、也没有 resize 监听（驾驶舱模块内 grep 无 `innerHeight` / `clientHeight`）。
- `.cockpit-shell__atmosphere`：`fixed` → `absolute`，氛围底只铺驾驶舱自己的范围，不再盖到宿主页头那一带。

### 验收证据

真实路径（`yarn dev`，服务在 8000）：外壳 `position: absolute`、`y=0 h=950`（= 视口高）、底边贴合、链上无可滚动祖先、地图铺满主体；走查 A12（铺满视口）保持绿。

`node .scratch/cockpit-shell-panel-layout/verify/t28-fill-container.mjs` → **7/7 通过**。脚本把 `#tvt-app` 临时改成「有定位 + top:54px + 高度 = 视口 - 54px + 滚动容器」，复刻「宿主套壳」那条几何链路（预演站里实测到的定位容器是 `section.fes-layout.is-fixed`：absolute、top 54px、高 896），再对比新旧实现：

- `A-real-host` 真实宿主（无页头）：外壳铺满视口、底边贴合、无可滚动祖先、地图铺满主体。
- `B1-reproduce-old` **复现**：套壳宿主 + 旧实现（`position: static; height: 100vh`）→ 外壳 `y=54 h=950`、底边 1004 > 视口 950、宿主容器多出纵向滚动。与票 06 走查在预演站实测到的 `y=54 / main.bottom=992` 是同一现象。
- `B2-fixed` 修复后：外壳高 = 容器高 896、底边 = 视口底 950、`main.bottom <= 视口高`、无纵向滚动、地图仍铺满主体。
- `B3-atmosphere-scoped`：氛围底范围与外壳完全一致，不越界到页头那一带。
- `B4-follows-container` + `C-real-viewport-resize`：容器再变矮 66px、以及把视口**真的**改成 1280x720，外壳都跟着缩（666 = 720 - 54）并保持底边贴合、无滚动条——证明是 CSS 跟随，不是一次性测量。

回归：`t06-assets.mjs` 15/15、`t01-panel-catalog.mjs` 通过、走查 A12 仍绿。

### 环境口径的由来

本票原先的验收第 1 条写的是「`npm run pre.dev` 演示环境下」，属于**框错了环境**：维护者 2026-09-16 明确真实启动路径是 `yarn dev`、真实应用环境不使用 predev 启动服务。上面的证据全部落在真实路径，宿主套壳那条用等价复现覆盖；走查脚本头部与 `map.md` 的 Notes 也同步了这条口径，免得后人再去追 predev。