要讓 body 高度自適應螢幕高度，方法有很多，核心在於理解視口單位和一些 CSS 屬性的運用。以下是一些常用的方法以及解釋：
1. 使用 vh 單位:
這是最直接和常用的方法。vh 是視口高度的單位，1vh 等於視口高度的 1%。設定 height: 100vh; 會使元素的高度佔據整個螢幕高度。
body {
height: 100vh;
}
為什麼有效? vh 單位是相對於視口高度計算的，因此會隨著視口高度的變化而動態調整。
2. 使用 min-height: 100vh;
這個方法與 height: 100vh 類似，但更靈活。它保證 body 的最小高度是螢幕高度，如果內容超出螢幕高度，body 會自動擴充套件，避免內容被截斷。
body {
min-height: 100vh;
}
為什麼有效? min-height 確保元素高度至少為指定值，同時允許內容超出時自動擴充套件高度。
3. 使用 Flexbox 佈局:
Flexbox 佈局也可以實現 body 高度自適應。將 body 設定為 flex 容器，並設定 height: 100vh 或 min-height: 100vh。
body {
display: flex;
flex-direction: column; /* 垂直排列 */
min-height: 100vh;
}
為什麼有效? Flexbox 的 flex-direction: column 會使子元素垂直排列，min-height: 100vh 確保容器至少佔據整個螢幕高度。
4. 使用 Grid 佈局:
與 Flexbox 類似，Grid 佈局也可以實現 body 高度自適應。
body {
display: grid;
min-height: 100vh;
}
為什麼有效? Grid 佈局同樣可以控制子元素的排列，min-height: 100vh 確保容器至少佔據整個螢幕高度。
需要注意的點:
html元素的高度: 為了使body的height: 100vh生效，有時還需要設定html { height: 100%; }。這是因為body的高度是相對於其父元素html計算的。- margin 和 padding:
body的 margin 和 padding 會影響最終的高度計算。如果設定了 margin 或 padding，需要考慮它們對高度的影響。可以使用box-sizing: border-box;來將 padding 和 border 包含在元素的寬度和高度計算中。 - 移動端位址列: 在移動端，位址列的顯示和隱藏會影響視口高度。可以使用 JavaScript 監聽視窗大小變化事件來動態調整 body 的高度。
選擇哪種方法取決於具體的佈局需求。如果只是簡單的讓 body 佔據整個螢幕高度，使用 height: 100vh 就足夠了。如果需要更靈活的佈局，可以使用 Flexbox 或 Grid 佈局。 記住處理 html 元素的高度以及 margin/padding 的影響。
希望以上解釋能夠幫助你理解如何讓 body 高度自適應螢幕。