如何以跨浏览器和跨平台方式获取有效的窗口高度

Question

我需要一种方法来获取浏览器窗口的有效高度。通过说有效，我的意思是用户实际上可以看到的区域。

因此，例如，大多数移动浏览器都应计算出一个"浮动"导航栏和/或浏览器窗口上的"浮动"底按钮栏，例如，它可能会弄乱$(window).height()，因为它将显示总高度，不包括这些条。

我的场景如下：我需要一个"全屏"对话框窗口，该对话框窗口中有一个标题，页脚和身体部分。如果对话框包含更长的内容时，我希望对话框滚动（而不是整个文档），并且标题/页脚可以留在有效的视口中，以便例如页脚中的按钮可以始终可见。

到目前为止，我还没有找到一个很好的解决方案。我已经尝试调整引导模式，而我所能达到的只是可滚动的modal-body。它在台式机上效果很好，但是当我从窗口高度计算modal-body的max-height时，我在移动浏览器上遇到了问题，因为顶部（和/或底部）条将破坏布局，并且页脚按钮在底部栏下滑动，或出门在外。

Answer 1

基于加里·海斯（Gary Hayes）的评论，我设法为针对小屏幕设备（使用bootstrap）提供了一个解决方案。我放弃了在内容较小时保持对话框较小的要求，但仍然更有希望。

直到现在才在模拟器中测试它，但希望它也可以在真实的设备上使用，最大的优势是它不需要任何方式。

我已经在这样的地方实施了：

@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
            }
        }
    }
}