设置html、body、#root宽高100%为什么会溢出出现滚动条？

出现不需要的横向、纵向滚动条的核心原因是浏览器自带的默认用户代理样式表给body元素设置了默认外边距，目前主流浏览器默认给body设置的外边距为8px。

你给html、body、#root设置的width: 100%、height: 100%使用的是默认标准CSS盒模型规则，宽高百分比仅相对于父元素的内容区尺寸计算，不会包含元素自身的外边距。因此body的实际总占据尺寸为：

• 总宽度：100% + 8px（左外边距） + 8px（右外边距）
• 总高度：100% + 8px（上外边距） + 8px（下外边距）
  超出了html元素对应的视口尺寸，就会触发滚动条。

最简修复 #

直接清除body的默认外边距即可，在CSS中新增如下规则：

body {
  margin: 0;
}

通用最佳实践 #

实际项目开发中通常会做全局样式重置，一次性消除所有元素的默认边距差异，同时统一盒模型规则，避免同类问题反复出现：

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color: #ffffff;
  background: #000000;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
}

其中box-sizing: border-box的作用是将元素的内边距、边框纳入宽高计算范围，后续给元素加padding、border时不会额外撑大元素尺寸，减少布局溢出问题。

• 用户代理样式表：浏览器出厂自带的默认样式表，会给p、body、ul等所有常见元素设置默认的margin、padding、字体大小等属性，不同浏览器的默认样式存在细微差异，样式重置的目的就是抹平这类默认差异，保证不同浏览器下的布局表现一致。
• CSS盒模型：
  • 标准盒模型（默认值box-sizing: content-box）：元素总宽度 = 设定width + padding + border + margin，总高度 = 设定height + padding + border + margin
  • 怪异盒模型（box-sizing: border-box）：设定的width、height已经包含了padding和border，总宽度仅额外加上margin
• 百分比宽高计算规则：默认情况下，块级元素的百分比宽高是相对于父元素的内容区尺寸计算的，不会包含父元素的padding、border、margin。

内容的提问来源于stack exchange，提问作者Clive