CSS 全屏佈局失效：註釋語法錯誤、默認邊距與高度塌陷排查

問題現象

.st-scroll、.st-panel 設置 width:100%; height:100% 但未鋪滿視口，出現白邊、滾動條。

三大核心錯誤

1. CSS 註釋語法錯誤導致樣式失效

/* 錯誤：HTML 註釋語法 */
<!--內容--> 

/* 正確：CSS 註釋 */
// 內容 或 /* 內容 */

瀏覽器遇到 <!-- 會進入「解析錯誤恢復模式」，後續規則可能被忽略。

2. 未重置默認邊距

html, body, .container, .st-container {
    height: 100%;
    width: 100%;
    margin: 0;      /* 關鍵 */
    padding: 0;     /* 關鍵 */
}

瀏覽器默認 body { margin: 8px } 會導致白邊、高度計算偏差。

3. 內容元素 margin 撐開高度

h2, p { margin: 0; padding: 0; } /* 避免邊距合併導致容器高度超過 100% */

修正後完整 CSS

html, body, .container, .st-container {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
h2, p { margin: 0; padding: 0; }

.st-scroll, .st-panel {
    width: 100%;
    height: 100%;
    position: relative;
    color: red;
    background: #333;
    left: 0;
    top: 0;
}

調試技巧

• 開發者工具 → Elements → 檢查 html/body 計算高度是否為視口高度。
• 勾選「Show user agent styles」查看默認樣式覆蓋情況。
• 使用 box-sizing: border-box 全局避免 padding/border 撐大尺寸。