本文详解如何通过 css 精确控制 body 高度，使其完整覆盖浏览器可视区域（100vh），同时解决因默认 margin、box-sizing 和可读性导致的常见布局问题。
本文详解如何通过 css 精确控制 body 高度，使其完整覆盖浏览器可视区域（100vh），同时解决因默认 margin、box-sizing 和可读性导致的常见布局问题。
要让 元素真正“撑满整个屏幕”，仅设置 height: 100vh 是不够的——它可能被默认样式干扰而失效。关键在于系统性地消除浏览器默认行为带来的副作用，并采用更稳健的组合方案。
✅ 核心四步法（推荐写法）：
-
重置默认外边距：所有现代浏览器会给
应用约8px（即0.5em）的上下 margin，这会导致内容内缩、背景无法铺满； -
启用视口高度基准：使用
min-height: 100vh（而非height: 100vh），确保即使内容超出一屏，body 仍能自适应扩展，避免截断； -
统一盒模型：全局设置
* { box-sizing: border-box }，使 padding 和 border 不再额外增加元素尺寸； -
保障内容可读性：添加合理
padding（如1rem），避免文字紧贴边缘，提升用户体验。
以下是优化后的完整 CSS 片段（已整合您原有的 Poppins 字体和滚动平滑设置）：
@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;
padding: 0;
}
/* body 基础样式：全屏 + 可读间距 + 字体继承 */
body {
font-family: 'Poppins', sans-serif;
min-height: 100vh;
padding: 1rem; /* 推荐值，可根据设计调整 */
/* 可选：添加渐变背景示例 */
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}
/* 平滑滚动（保留您原有逻辑） */
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
⚠️ 注意事项：
- ❌ 避免仅用
height: 100vh：当页面内容高度超过视口时，会强制裁剪，导致底部内容不可见； - ✅ 优先用
min-height: 100vh：兼顾“填满首屏”与“容纳长内容”的双重需求； - ? 若项目中已引入 CSS 重置库（如 Normalize.css 或 modern-normalize），请确认其是否已处理
body margin，避免重复或冲突； - ? 设置背景时，确保
background-attachment: scroll（默认值），防止固定背景在滚动时产生视觉错位。
最终效果：body 将严格贴合视口尺寸，背景渐变完整铺满首屏，且支持内容自然延展，无溢出、无空白、无截断——为响应式布局打下坚实基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
