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

Posted 2023-05-08

【中文标题】使用位置时页面布局未按预期显示：已修复页面内容

【英文标题】：page layout not displaying as expected when using position:fixed for page content

【发布时间】：2014-12-19 14:39:01

【问题描述】：

我的位置有问题：已修复关于我的菜单的显示/隐藏锚点（在本例中为汉堡包图标）。

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

我已添加：

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

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

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

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

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

http://www.alibimedia.com/mm-fixed

http://www.alibimedia.com/mm-static

任何帮助将不胜感激。

【参考方案1】：

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

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

像魅力一样工作！谢谢弗雷德。

【参考方案2】：

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

张贴以防它混淆其他人。