mmenu错误包裹全部body元素而非指定#page，致粘性页脚失效

核心问题分析 #

你遇到的情况是因为重复初始化mmenu实例：每次媒体查询状态变化时，你都会新建一个Mmenu实例，但没有销毁旧的实例，这会导致mmenu多次操作DOM，错误地将footer也包裹进了mm-page容器中，破坏了原本的flex布局粘性页脚逻辑。

解决方案 #

1. 仅维护一个mmenu实例，切换时销毁旧实例

修改你的脚本，保存菜单实例引用，每次媒体查询触发时先销毁旧实例再创建新的：

document.addEventListener("DOMContentLoaded", () => {
    let menuInstance = null; // 保存菜单实例引用

    function mediaqueryresponse(mql) {
        // 销毁已存在的实例，避免重复操作DOM
        if (menuInstance) {
            menuInstance.destroy();
        }

        var mmenuOptions = {
            navbar: {
                title: "My Menu"
            },
            offCanvas: {
                page: {
                    selector: "#page"
                },
                position: "left-front"
            },
            pageScroll: {
                scroll: true,
                update: true
            },
            setSelected: {
                current: "detect",
                hover: true
            },
            sidebar: {
                collapsed: {
                    use: "(min-width: 50px)"
                },
                expanded: {
                    use: "(min-width: 1024px)"
                }
            },
            theme: "dark-contrast"
        };

        if (mql.matches) {
            mmenuOptions.navbars = [
                {
                    position: "top",
                    content: ["prev", "title", "close"]
                }
            ];
        } else {
            mmenuOptions.navbars = [
                {
                    position: "top",
                    content: ["prev", "title"]
                }
            ];
        }

        // 创建新实例并保存引用
        menuInstance = new Mmenu("#navmenu", mmenuOptions);
    }

    const mql = window.matchMedia("screen and (max-width: 900px)");
    mediaqueryresponse(mql);
    mql.addListener(mediaqueryresponse);
});

2. 验证DOM结构是否符合预期

执行上述修改后，检查生成的DOM结构，确认#footer是否在mm-page容器之外。如果仍然存在问题，可以尝试：

• 暂时移除sidebar相关配置，排查是否是该配置导致的page范围识别错误
• 确认#page元素没有被其他JS代码动态修改

3. 备用方案：通过CSS强制修复粘性页脚

如果上述方法无法解决，可通过CSS强制让footer脱离mmenu的包裹影响：

/* 固定footer在底部 */
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: auto;
    padding-top: 30px;
    padding-bottom: 20px;
    background-color: #fff; /* 替换为你的页面背景色，避免内容穿透 */
}

/* 给主内容区添加底部内边距，避免内容被footer遮挡 */
#page {
    padding-bottom: 70px; /* 值等于footer的总高度（上下内边距+内容高度） */
}

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