mmenu - 使用位置时页面布局未按预期显示：已修复页面内容

Question

我遇到了 position:fixed 关于我的 mmenu 的显示/隐藏锚点的问题（在这种情况下，是一个汉堡包图标）。

选择图标会按预期切换菜单，但在菜单打开的情况下，页面在 Safari、OS X 中的 Chrome 和 Firefox 以及 Safari iOS 8 中从顶部向下推约 32px。令人惊讶的是，该页面在 IE 中正确显示10 和 11。

我已经添加：

<script src="js/jquery.mmenu.fixedelements.js"></script>

到页面，并将类“FixedTop”分配给包含锚点的 div。所有 100% 的高度都标记为 100vh。

我还尝试将整个页面包装在 a 中div#wrapper，并"Selector: '#wrapper'"在触发插件时添加以覆盖默认值"body > div"。我已经删除了div#wrapper.

以下是两个链接 - 一个用于position:fixed示例，另一个用于position:static示例。

两者之间的唯一区别是固定示例中的“layout.css”包括position:fixed包含锚点的 div 的样式。

任何帮助将不胜感激。

score 1 · Accepted Answer

mmenu 的 Fred 提供了这个解决方案：

向中添加一个padding-top（例如 1px）<DIV class="content">，这样margin-topfrom<H1>就会留在其中。

奇迹般有效！谢谢弗雷德。

score 0 · Accepted Answer

当OP谈到删除#wraper div时，这让我感到困惑。但是我将它添加到我的包装器中（按照文档中的建议将您的内容包装在单个 div 中），它就像一个魅力。

发布以防它混淆其他人。

2 回答 2