我已经启动并运行了 mmenu，并执行了我需要它执行的所有操作，除了它破坏了我的粘性页脚，因为它会自动将所有代码包装在其中
<body>我的脚本有
page: { selector: "#page" }
我有我想要包裹在里面的内容
<div id="page"></div>我正在使用 mmenujs.com 的最新版本。
这是我所拥有的示例布局：
<html>
<head>
<link href="mmenu/mmenu.css" rel="stylesheet" />
</head>
<body style="min-height: 100vh; display: flex; flex-direction: column;">
<div id="page">All the page content</div>
<div id="footer" style="padding-top: 30px; padding-bottom: 20px; margin-top: auto;">My sticky footer</div>
<nav id="navmenu">
<ul>
<li><span>HOME</span></li>
<li><span>Example</span>
<ul>
<li><span>Test</span></li>
</ul>
</li>
</ul>
</nav>
<script src="mmenu/mmenu.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
function mediaqueryresponse(mql) {
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"
]
}
];
}
new Mmenu("#navmenu", mmenuOptions);
}
const mql = window.matchMedia("screen and (max-width: 900px)");
mediaqueryresponse(mql);
mql.addListener(mediaqueryresponse);
});
</script>
</body>
</html>
发生的事情是这样的：
<div id="mm-4" class="mm-page mm-slideout">
<div id="page"></div>
<div id="footer"></div>
</div>
这打破了我粘性的页脚。
我需要它是：
<div id="mm-4" class="mm-page mm-slideout">
<div id="page"></div>
</div>
<div id="footer"></div>
我知道 offCanvas 正在工作，因为我可以将位置更改为“右前”，并且菜单出现在右侧。我还确认了在函数运行之前 #page 在 DOM 中。
当然，如果没有菜单，我的粘性页脚也能完美工作。
不确定我做错了什么，但感谢任何帮助。谢谢！
问题似乎是由 Mmenu 将内容包裹在画布外元素内的方式引起的。解决该问题并防止 Mmenu 将页脚包裹在画布外元素内。通过将页脚 div 移到 body 元素之外，它不会被包裹在画布外元素内，并且您的粘性页脚应该按预期工作。
<html>
<head>
<link href="mmenu/mmenu.css" rel="stylesheet" />
</head>
<body style="min-height: 100vh; display: flex; flex-direction: column;">
<div id="page">All the page content</div>
<nav id="navmenu">
<ul>
<li><span>HOME</span></li>
<li><span>Example</span>
<ul>
<li><span>Test</span></li>
</ul>
</li>
</ul>
</nav>
<script src="mmenu/mmenu.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
function mediaqueryresponse(mql) {
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"
]
}
];
}
new Mmenu("#navmenu", mmenuOptions);
}
const mql = window.matchMedia("screen and (max-width: 900px)");
mediaqueryresponse(mql);
mql.addListener(mediaqueryresponse);
});
</script>
</body>
</html>
事实证明，虽然 Shweta Mishra 的答案不是解决问题的正确方法，但她的显示理念：flex；弯曲方向：列；最小高度：100vh；最终非常有帮助。
对于遇到此问题的其他人，需要执行以下操作。
完全重写了菜单触发脚本。这样做的原因显然是，如果您在菜单中进行媒体查询，它会以各种不同且非常糟糕的方式中断。因此，我简化了它并使其在不使用 js 媒体查询的情况下工作。
页面的offCanvas调用不再在选项中，而是在配置中，这意味着初始化菜单时需要单独编写它作为第二个参数。一旦我这样做了，它就按照应有的方式使用#page作为菜单。
如果您正在尝试编写响应式代码（并且您应该这样做），则需要使用菜单offCanvas配置选项clone: true。这可以防止菜单内容在方向改变或浏览器窗口大小调整时消失。
仍然有一些 CSS 样式需要覆盖，但回到 Shweta 关于页脚粘在底部的答案，我在 #page 上使用了她的建议，并将页脚放在 #page 内。这是让一切在所有浏览器和设备上正常工作的唯一方法。
该代码最终看起来像：
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
希望这个答案可以帮助其他人！