Web开发结业项目Footer组件出现轻微水平滚动条问题求助

我帮你排查出了几个导致水平滚动条的原因，咱们逐个修复：

问题根源与修复步骤 #

1. 错误的底部定位值 #

你给footer设置了bottom: 100，这里既没有单位（应该是px），数值也不符合需求——要让footer固定在页面底部，应该改为bottom: 0。这个错误会导致footer位置异常，间接引发滚动问题。

2. 盒模型宽度溢出（核心问题） #

默认的box-sizing: content-box会让元素的width: 100%仅计算内容宽度，加上padding后总宽度会超出视口。我们需要给相关元素设置box-sizing: border-box，让padding包含在宽度内。

3. 冗余的宽度设置与布局细节 #

• .socials设置的width: 100%是多余的，flex布局本身会自动适配父容器宽度，保留它反而可能引发溢出。
• .footer-bottom里的p元素使用flex布局但无需额外设置justify-content: flex-start（默认就是左对齐），在小屏幕下可以改为居中对齐提升体验。

修复后的完整CSS代码 #

/* 全局重置盒模型，避免所有元素出现宽度溢出问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

footer { 
  position: absolute; 
  bottom: 0; /* 修复定位值 */
  left: 0; 
  right: 0; 
  background: #111; 
  height: auto; 
  width: 100%; 
  padding-top: 40px; 
  color: #fff; 
} 

.footer-content { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  text-align: center; 
  h3 { 
    font-size: 2rem; 
    font-weight: 500; 
    text-transform: capitalize; 
    line-height: 4rem; 
    color: yellow; 
  } 
} 

.socials { 
  list-style: none; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  /* 移除多余的width:100% */
  li { 
    margin: 0 8px; /* 给li添加左右间距，避免内容挤在一起 */
  } 
  a { 
    text-decoration: none; 
    color: #fff; 
    padding: 5px; 
    &:hover { 
      color: rgb(255, 251, 0); 
      transition-duration: 1s; 
    } 
  } 
} 

.footer-bottom { 
  background: #000; 
  width: 100%; 
  padding: 20px; 
  padding-bottom: 40px; 
  text-align: center; 
  p { 
    /* 移除不必要的flex设置，或者保留但调整对齐 */
    font-size: 14px; 
    word-spacing: 2px; 
    text-transform: capitalize; 
    a { 
      color: yellow; 
      font-size: 16px; 
      text-decoration: none; 
    } 
  } 
} 

@media (max-width: 830px) { 
  .socials li { 
    font-size: 14px; 
  }
  /* 小屏幕下让版权文本居中，避免溢出 */
  .footer-bottom p {
    text-align: center;
  }
}

额外说明 #

• 全局的* { box-sizing: border-box; }是前端开发的常用技巧，可以从根源上避免大多数因padding、border导致的宽度溢出问题。
• 给.socials li添加了margin: 0 8px，让导航链接之间有合适的间距，提升视觉体验。
• 小屏幕下调整了版权文本的对齐方式，避免文本过长时出现溢出。

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