求助：页面Footer无法占满100%宽度且出现横向滚动

以下是针对你问题的具体解决方案：

核心问题分析 #

你的代码存在三个关键问题：

• 未设置position属性，导致left:0、bottom:0完全无效
• 未重置浏览器默认的body边距，使得width:100%是基于带边距的body计算，无法占满视口
• 未启用box-sizing: border-box，若后续给footer加padding/border，会直接超出宽度引发横向滚动条

方案1：固定在页面底部（始终可见） #

适合需要footer一直停留在视口底部的场景：

/* 先重置浏览器默认样式 */
body {
  margin: 0;
  padding: 0;
  /* 给body加底部内边距，避免页面内容被footer遮挡 */
  padding-bottom: 60px; /* 值等于footer的高度 */
}

.footer {
  position: fixed; /* 开启固定定位，使left/bottom生效 */
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* 确保padding/border不会超出宽度 */
  background-color: #ffe7e8;
  /* 示例内边距，可根据需求调整 */
  padding: 1rem;
  /* 可选：设置footer高度 */
  height: 60px;
}

方案2：随页面滚动到底部（非固定） #

适合footer只在页面内容结束后显示的场景：

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保页面至少占满视口高度 */
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto; /* 自动将footer推到页面底部 */
  width: 100%;
  box-sizing: border-box;
  background-color: #ffe7e8;
  padding: 1rem;
}

关键说明 #

• box-sizing: border-box：强制元素的宽度计算包含padding和border，彻底避免因内边距导致的宽度溢出
• 重置body的margin:0：去掉浏览器默认的8px左右边距，让footer的100%宽度完全匹配视口
• 定位属性：使用fixed时footer会固定在视口，使用flex布局的margin-top:auto则是让footer跟随页面内容

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