如何计算文档最大可用高度，兼容Chrome、Firefox且不受开发者工具影响

问题根因 #

你原先的计算逻辑偏差是因为：开启开发者工具后，window.outerHeight - window.innerHeight的差值会包含开发者工具的高度，导致你把临时开启的devtools误算成了浏览器固定的非内容区域高度，最终得到的可用高度偏小。

兼容Chrome/Firefox的解决方案 #

下面按你需要的场景提供两种稳定方案：

场景1：获取浏览器窗口最大化（非F11全屏幕）时的最大可用内容高度

这个场景的核心是提前缓存浏览器固定UI（标签栏、地址栏、书签栏等，不含临时开启的devtools）的高度，步骤如下：

1. 监听窗口resize事件，当满足window.outerHeight === window.screen.availHeight时，说明当前浏览器处于最大化状态
2. 此时计算const browserUiHeight = window.outerHeight - window.innerHeight，将该值存入localStorage作为基准UI高度，只要用户不修改浏览器UI布局（如开关书签栏、调整标签栏位置），该值长期有效
3. 后续任何时候需要计算最大可用高度，直接用公式：

const maxAvailHeight = window.screen.availHeight - localStorage.getItem('browserUiHeight')

该方案完全规避了开发者工具的影响，因为基准值是在未开启devtools的最大化状态下采集的，后续开devtools也不会干扰计算结果。

场景2：获取F11全屏幕（隐藏所有浏览器UI）时的最大可用内容高度

这个场景下浏览器所有UI都会隐藏，直接用操作系统返回的屏幕总高度即可：

const maxFullscreenHeight = window.screen.height

额外需求：计算当前开启的开发者工具高度 #

如果你有统计当前devtools高度的需求，在已经缓存了基准browserUiHeight的前提下，可以直接用以下公式计算：

const devtoolsHeight = (window.outerHeight - window.innerHeight) - localStorage.getItem('browserUiHeight')

如果计算结果大于0，说明当前开发者工具处于开启状态，数值即为devtools的高度。

注意事项 #

• 多显示器场景下，window.screen会自动匹配浏览器当前所在显示器的参数，无需额外适配
• 如果用户修改了浏览器UI布局，在下次窗口最大化时会自动更新基准UI高度，无需手动处理

内容的提问来源于stack exchange，提问作者cherryguy