移动端网页多余空白消除与汉堡菜单宽度100%适配问题

DevOps 小满

2026-9-28

问题成因

你遇到的横向空白和菜单宽度问题由三个核心原因导致：

移动端下.mainMenu未设置left: 0和width: 100%，fixed定位的菜单没有对齐视口边缘、宽度不符合预期
.mainMenu默认flex布局为横向排列，移动端视口宽度不足时菜单项横向溢出，同时全局未限制横向溢出，最终导致页面出现横向滚动条和多余空白
ul标签自带默认左内边距，也会进一步导致菜单偏移、宽度超出

解决方案

1. 新增全局基础样式，阻止横向溢出

在你的CSS文件最顶部添加以下规则，避免任何元素超出视口导致横向滚动：

html, body {
  overflow-x: hidden;
  width: 100%;
}

2. 调整移动端媒体查询内的`.mainMenu`样式

找到你适配移动端的媒体查询块（一般是@media (max-width: 768px)），添加/修改.mainMenu的样式如下：

@media (max-width: 768px) {
  nav .mainMenu {
    position: fixed;
    top: -100%;
    left: 0; /* 对齐视口左侧 */
    width: 100%; /* 宽度占满整个视口 */
    height: 100vh; /* 可选，需要菜单占满全屏就保留，不需要可以删掉 */
    flex-direction: column; /* 菜单项改为垂直排列，避免横向溢出 */
    justify-content: center; /* 可选，菜单项垂直居中 */
    align-items: center; /* 菜单项水平居中 */
    background: #ffffff; /* 替换为你需要的菜单背景色 */
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除ul标签默认左内边距 */
    transition: top 0.3s ease; /* 可选，添加平滑弹出动画 */
  }

  /* 同步调整移动端菜单项的边距，避免过大的内边距导致溢出 */
  nav .mainMenu li a {
    margin: 8px 0;
    padding: 12px 24px;
  }
}