移动端侧边导航（sidenav）垂直溢出问题排查求助

核心问题分析 #

你的导航菜单使用绝对定位后仍提前可见、页面出现垂直溢出，主要原因有两点：

1. 绝对定位的参考父元素缺失，导致菜单相对于整个文档定位，而非header
2. 未限制页面水平方向的溢出，同时菜单的隐藏逻辑未彻底切断其对布局的影响

具体修改步骤 #

1. 修正CSS定位关系 #

给header添加position: relative，让绝对定位的ul以header为基准定位，避免菜单脱离预期的上下文：

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* 新增 */
    width: 100%; /* 确保header占满视口宽度 */
}

2. 彻底隐藏菜单并消除溢出 #

给body添加overflow-x: hidden，限制页面水平方向的滚动，同时给ul补充opacity过渡优化视觉效果：

body {
    margin: 0; /* 清除默认边距 */
    overflow-x: hidden; /* 禁止水平滚动，彻底隐藏视口外内容 */
}

.header .navbar .unorderd-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 100%; /* 改为相对header底部定位，避免固定top值适配问题 */
    right: -18.125rem;
    width: 18.125rem;
    height: 12.5rem;
    background-color: #111;
    z-index: 1000;
    transition: all ease-in 300ms;
    opacity: 0; /* 初始隐藏时透明 */
}

/* 菜单展开时的状态 */
.header .navbar .unorderd-list.active {
    right: 0;
    opacity: 1;
}

3. 简化JS逻辑（改用类切换） #

避免直接操作style，改用添加/移除类的方式，让样式逻辑更集中：

function mobileNav() {
    const hamburgerContainer = document.querySelector('.hamburger-container');
    const navList = document.querySelector('.unorderd-list');
    let openNav = false;
    
    hamburgerContainer.addEventListener('click', () => {
        openNav = !openNav;
        hamburgerContainer.classList.toggle('active');
        navList.classList.toggle('active');
        // 更新无障碍属性
        hamburgerContainer.setAttribute('aria-expanded', openNav);
    });
}
mobileNav();

4. 补充汉堡图标样式（完善交互） #

如果还没给汉堡图标添加样式，可以补充以下代码实现基础的汉堡/叉切换：

.hamburger-container {
    width: 2rem;
    height: 1.5rem;
    position: relative;
    cursor: pointer;
}

.hamburger-container .bar {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333;
    left: 0;
    transition: all 300ms ease;
}

.hamburger-container .bar:nth-child(1) {
    top: 0;
}
.hamburger-container .bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
.hamburger-container .bar:nth-child(3) {
    bottom: 0;
}

/* 激活状态下的叉形 */
.hamburger-container.active .bar:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.hamburger-container.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-container.active .bar:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

关键说明 #

• 使用position: relative给绝对定位元素提供正确的参考容器，避免菜单在页面滚动时错位
• body { overflow-x: hidden }是彻底隐藏视口外水平内容的核心，之前只给header/nav设置无法生效，因为溢出是在body层面
• 改用类切换替代直接操作style，让样式和行为分离，更易于维护

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