移动端导航栏背景无法全屏覆盖问题求助

直接给你针对问题的修复方案，核心是清除浏览器默认样式并强制元素撑满视口：

关键修复步骤 #

• 清除<ul>和<body>的默认边距、内边距，这是导致间隙的最常见原因
• 强制导航栏列表撑满视口宽度，避免被父容器约束
• 处理可能出现的横向滚动问题

具体CSS修改（媒体查询内） #

@media (max-width: 768px) {
  /* 修复导航栏背景 */
  .right-navbar ul {
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.8);
    /* 清除默认边距内边距 */
    margin: 0;
    padding: 0;
    /* 强制撑满视口宽度 */
    width: 100vw;
    /* 若需要全屏高度，添加下面一行 */
    min-height: 100vh;
  }

  /* 清除body默认边距，避免侧边间隙 */
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 防止横向滚动条 */
  }

  /* 自定义导航项的内边距（替代默认样式） */
  .right-navbar ul li {
    margin: 0;
    padding: 1rem 1.5rem; /* 根据需求调整 */
    list-style: none; /* 去掉默认圆点 */
  }
}

原因说明 #

1. 浏览器默认会给<ul>添加margin-left和padding-left，给<body>添加margin，这些会让背景无法贴合屏幕边缘
2. width: 100vw确保导航栏宽度严格等于设备视口宽度，不受父容器的padding或margin影响
3. overflow-x: hidden可以避免因100vw和body默认边距叠加导致的横向滚动

额外排查点 #

• 检查父元素.right-navbar是否设置了padding或margin，如果有也需要设为0
• 确认是否有其他全局CSS规则（比如第三方样式）覆盖了当前设置
• 如果底部仍有间隙，检查是否有其他元素的margin-bottom影响，或者给html, body添加height: 100%确保视口高度被正确识别

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