React移动端导航菜单背景无法铺满页面宽度问题求助

问题1：背景无法铺满页面整宽 #

排查并调整以下CSS属性：

• 给.nav-menu.active添加width: 100vw，同时设置left: 0，确保菜单从屏幕最左侧开始延伸
• 清除该元素及父容器可能存在的左右padding或margin，避免留白
• 给Navbar根容器添加overflow-x: hidden，防止横向滚动条出现

示例代码：

.nav-menu.active {
  background-color: #242424;
  width: 100vw;
  position: fixed;
  left: 0;
  padding: 0;
  margin: 0;
}

.navbar-container {
  overflow-x: hidden;
}

问题2：设置高度后按钮卡在底部 #

通过Flex布局调整内容与按钮的空间分配：

• 给.nav-menu.active设置display: flex和flex-direction: column，让菜单内容纵向排列
• 给底部按钮添加margin-top: auto，自动将按钮推至容器底部，同时保证上方内容正常展示

示例代码：

.nav-menu.active {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.nav-menu.active .mobile-nav-button {
  margin-top: auto;
  padding: 1rem 2rem; /* 按需调整按钮内边距 */
}

额外注意：

• 确认.nav-menu.active的position属性（如fixed）不会被其他元素的布局挤压
• 检查菜单元素的z-index值，确保它在页面上层正常显示

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