如何让 body 元素完全占满整个视口高度？-html教程-PHP中文网

如何让 body 元素完全占满整个视口高度？

通过设置 min-height: 100vh、重置默认 margin 和启用 box-sizing: border-box，可确保 body 占满全屏并正确渲染背景（如渐变），避免内容溢出或留白。

通过设置 `min-height: 100vh`、重置默认 `margin` 和启用 `box-sizing: border-box`，可确保 body 占满全屏并正确渲染背景（如渐变），避免内容溢出或留白。

要让元素真正占据整个浏览器视口（viewport）——尤其是当你希望为其添加全屏渐变背景时——仅靠 height: 100% 或默认样式是不够的。这是因为 HTML/CSS 中 body 默认受浏览器 UA 样式影响：存在默认外边距（通常为 8px）、采用 content-box 盒模型，且其高度不自动继承父容器（html）的 100% 高度。

✅ 正确做法需四步协同：

重置全局盒模型（推荐在 CSS 开头统一处理）：
```
* {
  box-sizing: border-box;
}
```
确保所有元素的 padding 和 border 都包含在宽高内，避免尺寸意外溢出。
清除 body 默认外边距：
```
body {
  margin: 0;
}
```
浏览器默认给 body 设置了约 8px 外边距，这是背景无法铺满屏幕的最常见原因。
设置最小视口高度：
```
body {
  min-height: 100vh;
}
```
使用 min-height（而非 height）更健壮：它保证 body 至少占满一屏，同时允许内容超出时自然滚动；而 height: 100vh 在内容超长时可能截断或触发双滚动条。

可选：添加内边距提升可读性（避免文字紧贴边缘）：

body {
  padding: 1rem; /* 或 0.5rem / 1.5rem，按设计需求调整 */
}

? 完整推荐 CSS 片段（整合你已有的样式）：

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

body {
  min-height: 100vh;
  padding: 1rem;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  /* ✅ 此时渐变将完整覆盖整个可视区域 */
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

⚠️ 注意事项：