Pikabu - 计算错误的高度答案

【问题标题】：Pikabu - Miscalculating HeightPikabu - 计算错误的高度
【发布时间】：2014-08-05 07:28:59
【问题描述】：

我正在尝试为我正在开发的网站创建一个非画布移动菜单，该菜单将替换旧的错误版本。我已经选择了https://github.com/mobify/pikabu，因为它可以满足我的所有需求，但我在计算错误高度时遇到了一些麻烦。

您可以在以下位置查看问题：http://verypc.very-dev.co.uk/

您需要缩小菜单，然后点击左上角的“汉堡”。菜单滑出，但您会注意到您仍然可以滚动页面正文。额外的高度来自 pikabu 和它计算的内联样式。

我最初的想法是，这是我的 CSS 中可能导致额外高度的东西，但我无法成功追踪它。

我正在尝试避免编辑 Pikabu 本身，但如果有必要这样做并不是什么大问题。

任何帮助都会很棒！

【问题讨论】：

无论您将浏览器设置多高，它似乎始终多出 95 像素。如果您在调整大小事件期间观看，“.m-pikabu-overlay”会设置为正确的高度..只有在打开菜单时才会添加额外的 95px

【解决方案1】：

这似乎是 pikabu 的“功能”..（如果您单步执行 Pikabu.prototype.setHeights 函数，您会看到 windowHeight 返回的值不正确）

line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();

chrome 上的window.outerHeight 包括浏览器工具栏、地址栏等的高度（~95px）

您可能需要删除此行以便它仅提供 window.outerHeight 或进行一些更好的设备嗅探以便仅在移动设备上触发

【讨论】：

@0Neji，或许值得在 pikabu 的 github 上提一下这个问题？
感谢@haxxxton 的回答，我们添加了outerHeight 计算，因为Android 版Chrome 如何提供高度，但看起来我们需要重新探索桌面版Chrome。我们在开发这些时考虑到了一个主要是移动用例，所以这似乎已经通过了。肯定会在下一个版本中修复这个问题。

【解决方案2】：

我在摆弄 Firebug。
在 css 中，当您关闭 header { position: fixed; } 时，它似乎会弹出到正确的位置（main.css）。

我根本不会在 CSS 中使用 position: fixed/absolute。如果你删除了这些，包括top: 0、right: 0 和height: 50px 标签，你就清理了你的代码。它似乎也可以正常工作。

【讨论】：