获取视口高度（不包括水平滚动条）？

Question

window.innerHeight给出视口的高度， 包括水平滚动条的高度。 有没有办法找到可用的内部高度，即不包括水平滚动条的高度？

我理想上是在寻找一种纯JS解决方案，但是如果没有，那么jQuery等也可以。

Answer 1

我在这里找到了解决方案： 滚动条检测演示 （我可以在此处放置指向其他人网站的链接吗？）

使用以下两个功能：

// check current presence of H & V scrollbars
// @return array [ Boolean, Boolean ]
function getSBLive(w) {
    var d = w.document, c = d.compatMode;
    r = c && /CSS/.test(c) ? d.documentElement : d.body;
    if (typeof w.innerWidth == 'number') {
        return [ w.innerWidth > r.clientWidth, w.innerHeight > r.clientHeight ];
    } else {
        return [ r.scrollWidth > r.clientWidth, r.scrollHeight > r.clientHeight ];
    }
}

// get current H & V scrollbars tickness
// @return array [ Number, Number ]
function getSBSize(w) {
    var d = w.document, b = d.body, r = [ 0, 0 ], t;
    if (b) {
        t = d.createElement('div');
        t.style.cssText = 'position:absolute;overflow:scroll;top:-100px;left:-100px;width:100px;height:100px;';
        b.insertBefore(t, b.firstChild);
        r = [ t.offsetHeight - t.clientHeight, t.offsetWidth - t.clientWidth ];
        b.removeChild(t);
    }
    return r;
}

然后，您可以使用以下功能来查找没有滚动条的窗口高度：

var sbLive = getSBLive(window);
var sbSize = getSBSize(window);

var windowHeightWithoutScrollBar = sbLive[0] ? sbSize[0] : 0;

Answer 2

如果我告诉您，这比您想像的要容易（或比您当时想的要容易） document.body.clientWidth;

Answer 3

jQuery解决方案是$(window).height(); 。