响应式设计问题：页面body无法占满全屏如何解决？

先把你之前设置的min-width:fit-content去掉，这个属性是让元素宽度自适应内容，反而会限制body占满视口，这是关键问题之一。

接下来按这几步排查解决：

• 给html和body同时设置基础样式，因为body的父元素是html，只单独设置body没用：

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 避免子元素超宽导致出现横向滚动条，造成body没占满的视觉错觉 */
}

浏览器默认会给html、body添加margin值，必须一起重置才能让元素铺满视口。

• 全局开启box-sizing:border-box，很多时候元素的padding、border会额外撑开宽度，导致布局超出视口：

* {
  box-sizing: border-box;
}

这个设置会让所有元素的宽度计算包含padding和border，不会出现“设置宽度100%但实际超宽”的情况。

• 检查所有子元素，比如某个div、表格有没有硬写固定宽度（比如width:1200px），把这类固定宽度改成max-width:100%；图片保持max-width:100%;height:auto;的设置即可。

如果还是没解决，打开Chrome元素检查器选中body，查看右侧计算出的宽度数值，同时检查父元素html的宽度、是否有子元素的overflow属性影响布局，按这个思路排查基本能搞定。

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