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

Question

我需要一种方法来获取浏览器窗口的有效高度。所谓有效，是指用户实际可见的区域。

例如，它应该考虑到大多数移动浏览器在浏览器窗口上放置了“浮动”导航栏和/或“浮动”底部按钮栏，这可能会破坏$(window).height()，因为它将显示总高度，不包括这些栏。

我的情况如下：我需要一个“全屏”对话框窗口，其中包含标题、页脚和它们之间的主体部分。如果对话框主体包含更长的内容，则希望对话框主体滚动（而不是整个文档），并且标题/页脚保持在有效视口中，以便例如页脚中的按钮始终可见。

到目前为止，我还没有找到一个好的解决方案。我尝试调整Bootstrap Modal，但我所能达到的只是一个可滚动的modal-body。它在桌面上运行得很好，但当我从窗口高度计算modal-body的max-height时，在移动浏览器上遇到问题，因为顶部（和/或底部）栏将破坏布局，页脚按钮会滑动到底部栏下面或视口外面。

- Zoltán Tamási

---

如果你已经知道页脚的高度，那么一切都不会变得混乱。但是，如果页脚的高度发生变化，那么你就需要进行计算了。 - Gary Hayes

@GaryHayes 问题不在页脚，而在对话框主体上。我想要在对话框周围留出一点边距，以使其看起来像一个对话框，因此使用固定定位和页面滚动会干扰这一点。但可能可以专门针对移动设备使用您的建议，我会看看并给出一些反馈。 - Zoltán Tamási

@AlvaroMontoro 不，我不认为这是重复的。我知道所有这些事情，但它们只与此相关。 - Zoltán Tamási

是的，我只是为移动设备而设计的。对于较大的屏幕，请使用不同的媒体规则。 - Gary Hayes

你可以使用 window.innerHeight 吗？ - Alvaro Montoro

Answer 1

根据Gary Hayes的评论，我已经成功地使用Bootstrap为小屏幕设备制定了一个解决方案。虽然我放弃了当内容很小时保持对话框小的要求，但它仍然更加有前途。

目前只在模拟器中测试过，但希望它也能在真实设备上运行，并且最大的优势是它不需要任何窗口高度。

我用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
            }
        }
    }
}

- Zoltán Tamási

---

太好了！很高兴你能自己解决问题。 :D - Gary Hayes