移动端底部导航栏首页宽度异常问题求助

针对你遇到的首页底部导航宽度超出设置值、其他页面正常的问题，可按以下步骤排查修复：

1. 修正导航定位样式，确保贴合视口 #

你的导航使用fixed定位，但当前样式存在冗余和错误：

• 移除background: fixed;（该属性用于背景图固定，与背景色设置冲突且无意义）
• 用left: 0; right: 0;替代width: 100%;，fixed定位下此组合能确保导航完全贴合视口左右边缘，避免宽度计算偏差
• 移除媒体查询中冗余的width: 100% !important

修改后的CSS：

.mobile-nav {
  display: none;
  height: 25%;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgb(230, 230, 230);
  z-index: 99;
  background-color: aliceblue;
}

@media only screen and (max-width: 768px) {
  .mobile-nav {
    display: flex !important;
    height: 9% !important;
    z-index: 10;
  }
}

2. 排查首页横向滚动触发源 #

首页出现导航溢出，大概率是页面存在超出视口宽度的元素，导致横向滚动条出现，视觉上让导航显得"溢出"：

• 给html和body添加overflow-x: hidden;，强制隐藏横向滚动：

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

• 检查首页所有元素：比如未设置max-width: 100%;的图片、固定宽度的容器，确保它们的宽度不超过视口。例如给图片添加：

  img {
    max-width: 100%;
    height: auto;
  }
  

3. 检查flex子元素宽度与溢出 #

导航的4个.mobile-nav-header各占25%宽度，需确保子元素不会超出容器：

• 给.mobile-nav-header添加overflow: hidden;，避免图标或文字过长导致宽度溢出：

  .mobile-nav-header {
    width: 25%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden; /* 添加此行 */
  }
  

• 移除.mobile-nav-header中的flex-wrap: wrap;（垂直布局下无需换行，反而可能导致布局混乱）

4. 排查首页特殊样式冲突 #

检查首页是否有以下情况：

• 导航的父容器设置了transform属性（如transform: translate()），会导致fixed定位的导航变为相对父容器定位，而非视口，从而出现宽度偏差
• 首页存在针对.mobile-nav的额外CSS规则，可通过浏览器开发者工具（F12）对比首页与其他页面的导航样式差异，定位冲突规则

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