JS 設置 CSS 高度單位缺失導致解析失敗：修復與最佳實踐

現象

document.getElementById("body").style.height = window.innerHeight; // Firefox 報錯：height 解析失敗

根因

CSSOM 規範要求長度值**必須帶單位**（px/em/rem/vh 等），無單位數值在 Standards 模式下被視為無效並忽略。

修復

document.getElementById("body").style.height = window.innerHeight + 'px';
// 或
document.body.style.height = window.innerHeight + 'px'; // 直接用 document.body

現代佈局替代方案（無需 JS 計算）

/* CSS 方案：視口高度 */
body { min-height: 100vh; }           /* 全屏最小高度 */
html, body { height: 100%; }          /* 父鏈傳遞 100% */
.container { min-height: 100vh; display: flex; flex-direction: column; }

JS 動態高度最佳實踐

1. 優先用 CSS vh、flex、grid 解決佈局，減少 JS 干預。
2. 必須用 JS 時，**統一加單位**，封裝工具函數 setPx(el, prop, val)。
3. 監聽 resize 事件配合 requestAnimationFrame 更新，避免佈局抖動。
4. 考慮 box-sizing: border-box 影響，offsetHeight 包含 padding/border。

核心教訓：**CSS 長度值無單位即無效**，養成 + 'px' 肌肉記憶。