怎么让body高度自适应屏幕？为什么？

要让 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 的高度。