如何跨浏览器跨平台获取window的有效高度？

Question

我需要一种方法来获得浏览器window的有效高度。所谓有效，是指用户实际可以看到的区域。

因此，例如，应该考虑到大多数移动浏览器在浏览器 window 上放置了 "floating" 导航栏 and/or 和 "floating" 底部按钮栏，这例如可能会弄乱 $(window).height()，因为它会显示总高度，不包括这些条。

我的场景如下：我需要一个 "full-screen" 对话框 window，其中有页眉、页脚和正文部分。如果对话框主体包含更长的内容，我希望对话框主体滚动（而不是整个文档），并且 header/footer 留在有效视口中，例如页脚中的按钮将是始终可见。

目前我还没有找到很好的解决办法。我试图调整 Bootstrap 模式，但我所能达到的只是一个可滚动的 modal-body。它在桌面上运行良好，但是当我从 window 高度计算 modal-body 的 max-height 时，我在移动浏览器上遇到了这个问题，因为顶部（and/or 底部）栏会破坏布局，页脚按钮会滑到底部栏下方，或滑出视口。

Answer 1

根据 Gary Hayes 的评论，我设法整合了一个专门针对小屏幕设备的解决方案（使用 bootstrap）。我放弃了在内容很小的时候保持对话框很小的要求，仍然更有希望。

到目前为止仅在模拟器中对其进行了测试，但希望它也能在真实设备上运行，最大的优势在于它完全不需要 window 高度。

我在 LESS 中是这样实现的：

@media (max-width: @screen-sm-max) {
    .modal {
        padding-right: 0 !important;
        position: fixed;

        .modal-dialog, .modal-content {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .modal-content {
            .modal-header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
            }
            .modal-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .modal-body {
                position: fixed;
                left: 0;
                right: 0;
                top: 60px; // height of header, calculated precisely in JS on shown.bs.modal handler
                bottom: 60px; // height of footer, calculated precisely in JS on shown.bs.modal handler
            }
        }
    }
}

如何跨浏览器跨平台获取window的有效高度？

How to get the effective height of window in a cross-browser and cross-platform way?

html

javascript

css

jquery

bootstrap-modal