如何实现页面全屏宽度显示？页面右侧空白原因排查

实现全屏宽度显示的方法 #

• 重置浏览器默认样式：给html和body清除默认边距与内边距，消除基础布局的留白：

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 避免横向滚动触发额外留白 */
  }
  

• 设置主容器满宽：页面顶级容器（比如项目中的#root或主包裹元素）设置width: 100%，不要添加固定宽度或多余的左右边距：

  .main-wrapper {
    width: 100%;
    max-width: 100%;
  }
  

• 处理溢出元素：对可能撑宽页面的元素添加overflow-x: hidden，防止横向滚动条出现。

右侧出现小块空白的常见原因 #

• 默认样式未重置：部分浏览器会给body或html添加默认的margin-right，直接导致右侧留白。
• 元素宽度+边距超出父容器：比如某个元素设置了width: 100%，同时又添加了padding-right或margin-right，总宽度超过视口范围。
• 横向滚动条残留：页面曾出现横向滚动，后续隐藏滚动条但布局未适配，添加overflow-x: hidden即可解决。
• 绝对定位元素越界：某个绝对定位元素向右偏移超出视口，撑开了页面宽度，检查其right或left属性设置。
• 布局模块宽度冲突：使用Grid/Flex布局时，列宽设置总和超过100%，会导致右侧出现留白。

针对你的项目，优先检查html/body的默认样式是否清除，再排查主容器的宽度和边距设置，基本可以解决问题。

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