为什么body{height:100%}会有滚动条？
html, body, #page {width: 100%;height: 100%;background-color: #000;
}
为什么会有滚动条？
html, #page {width: 100%;height: 100%;background-color: #000;
}
这个为什么不会有？
在 CSS 中，滚动条的出现通常是由元素尺寸超出视口（viewport）引起的。以下是两种代码行为的详细分析：
第一段代码（出现滚动条）
html, body, #page {width: 100%;height: 100%;background-color: #000;
}
原因：
<body>元素默认带有margin（通常为8px，由浏览器默认样式设置）。- 当
body的高度设为100%时，它等于视口高度。 - 但加上默认的
margin后，实际占用空间 =100% + 上下 margin（例如100% + 16px）。 - 这导致总高度超出视口，触发垂直滚动条。
第二段代码（无滚动条）
html, #page {width: 100%;height: 100%;background-color: #000;
}
原因：
- 此代码未设置
body的高度，因此body保持默认height: auto（由内容决定高度）。 #page作为body的子元素，其height: 100%会继承自父级：- 由于
body未明确高度，#page的100%实际无效（高度为0）。
- 由于
- 此时
body的实际高度仅由默认margin撑开（约16px），但未超出视口，故无滚动条。
关键差异
| 代码 | body 高度 | 效果 |
|---|---|---|
第一段（含 body） | 100% + 默认 margin | 超出视口 → 出现滚动条 |
第二段（不含 body） | auto（高度为 0 + margin） | 未超出视口 → 无滚动条 |
解决方案（消除滚动条）
若需全屏且无滚动条，重置 body 的默认 margin：
html, body, #page {width: 100%;height: 100%;margin: 0; /* 关键：清除默认 margin */background-color: #000;
}
这样 body 的 100% 高度会严格等于视口高度，无额外空间触发滚动条。