试图将 mmenu.js（关闭画布菜单）集成到我的网站中，但我的粘页脚有问题答案

【问题标题】：Trying to integrate the mmenu.js(off canvas menu) into my site, having trouble with my sticky footer试图将 mmenu.js（关闭画布菜单）集成到我的网站中，但我的粘页脚有问题
【发布时间】：2014-02-24 23:33:00
【问题描述】：

我正在尝试在我的网站中添加一个非画布菜单，而我选择的是 mmenu (http://mmenu.frebsite.nl/index.php)。除了我的页脚之外的所有其他东西都有效。我在网站上有一个粘性页脚，每次单击菜单打开时，页脚都会飞出位置。

对于固定页脚，添加类 mm-fixed-bottom： id="footer" class="mm-fixed-bottom">再见

示例：http://jsfiddle.net/1eddy87/Lx5ps/1/

我已经尝试过记录方式，它说您应该对任何固定元素使用“mm-fixed-bottom”，但这并没有奏效。

文档：http://mmenu.frebsite.nl/tutorial.php

滚动到页面底部，然后通过页眉打开菜单，您会看到页脚移出位置。

有什么想法吗？？

我意识到我使用的是绝对的，而不是固定的。它是粘性页脚（http://mystrd.at/modern-clean-css-sticky-footer/）的要求。我试图通过希望 mm-fixed-bottom 能够工作来解决我的问题，但它没有。我需要修复使用绝对值。

【问题讨论】：

标签： javascript jquery css mmenu

【解决方案1】：

你在页脚上出现了position:absolute，而它应该是fixed。您还将覆盖来自mm-fixed-bottom 的CSS。我认为粘页脚的全部原因是它停留在屏幕底部而不移动。

我删除了所有定位并且它起作用了。

http://jsfiddle.net/Lx5ps/3/

找到解决方案：

进一步检查，库似乎将<div class="mm-page"> 更改为height:100%，其中height:auto 拧紧。我在浏览器检查器中将其关闭，它可以工作。

改变了这个：

html.mm-opened .mm-page {
    height: auto;
    overflow: hidden;
    position: absolute;
}

http://jsfiddle.net/Lx5ps/4/

【讨论】：

我使用该代码的原因是因为它是粘性页脚而不是固定页脚，请参见示例mystrd.at/modern-clean-css-sticky-footer。我意识到我使用的是绝对的，而不是固定的。它是粘性页脚的要求。我试图通过希望 mm-fixed-bottom 能够工作来解决我的问题，但它没有。我需要修复使用绝对值。抱歉应该在上面提到
啊抱歉，我认为使用粘性这个词意味着它需要粘在那里。您所指的是如果内容没有将页脚推到底部，它将在那里对齐。 mm-fixed-bottom 有 position:fixed 在里面。

【解决方案2】：

刚刚遇到同样的问题，但我想出了使用 css calc。

html.mm-opened .mm-page {
height: -webkit-calc(100% - 320px);
height: -moz-calc(100% - 320px);
height: calc(100% - 320px);}

320px 是页脚的高度。 Calc 得到了很好的支持。见calc browser support

【讨论】：