设置width和height为100%时元素无法占满全空间如何修复

红色的#container元素即使将width设置为100%，也无法占满文档全部可用空间。排查时发现html元素看似存在额外内边距，但将其padding设置为0后，多余空白仍然存在。

根本原因 #

该问题由浏览器默认用户代理样式导致：所有主流浏览器都会为<body>元素设置默认值为8px的外边距margin，这部分空白不属于内边距范畴，因此仅设置padding: 0无法消除空白。原有样式仅定义了html与body的宽高为100%，未清除默认外边距，body的margin会在视口四周预留空白，内部的#container即便设置宽高100%也无法覆盖这部分区域。

复现代码 #

CSS #

body, html {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
  background-color: red;
}

HTML #

<body>
  <div id='container'></div>
</body>

修复方法 #

在html, body的样式规则中补充margin: 0清除默认外边距即可，修复后完整CSS如下：

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  height: 100%;
  background-color: red;
}

如果需要彻底规避所有元素默认边距对布局的干扰，可以在样式首部添加全局重置规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

该规则会清零所有元素的默认内外边距，同时将盒模型设置为边框盒模式，大幅降低布局适配成本。

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