如何使用 JQuery 获取不包括水平滚动条的 <DIV> 的高度？答案

【问题标题】：How do I get the height of a <DIV> not including the horizontal scrollbar using JQuery?如何使用 JQuery 获取不包括水平滚动条的 <DIV> 的高度？
【发布时间】：2010-01-17 01:55:37
【问题描述】：

我正在编写一个使用两个嵌套

元素的 jQuery 插件。

外部 div 有一个固定宽度，带有溢出：滚动，内部 div（更宽）包含我想要滚动的内容。

这一切都很好，除了我想使用一些 JavaScript（使用 jQuery）来设置内部 div 的高度以完全匹配外部 div 的高度，减去水平滚动条的高度。

目前我将其设置为外部 div 的高度，小于 20 像素。这种方法可行，但它不会独立于浏览器，而且肯定是 hack！

任何帮助将不胜感激！

【问题讨论】：

好问题！有兴趣看看这是否可能。

标签： javascript jquery css scrollbar

【解决方案1】：

您需要使用element.clientHeight。在 jQuery 中会是这样的：

var heightWithoutScrollbar = $('#outer')[0].clientHeight;

【讨论】：

【解决方案2】：

我找到了一个可以get the width of a scrollbar的函数

function getScrollBarWidth () {  
    var inner = document.createElement('p');  
    inner.style.width = "100%";  
    inner.style.height = "200px";  

    var outer = document.createElement('div');  
    outer.style.position = "absolute";  
    outer.style.top = "0px";  
    outer.style.left = "0px";  
    outer.style.visibility = "hidden";  
    outer.style.width = "200px";  
    outer.style.height = "150px";  
    outer.style.overflow = "hidden";  
    outer.appendChild (inner);  

    document.body.appendChild (outer);  
    var w1 = inner.offsetWidth;  
    outer.style.overflow = 'scroll';  
    var w2 = inner.offsetWidth;  
    if (w1 == w2) w2 = outer.clientWidth;  

    document.body.removeChild (outer);  

    return (w1 - w2);  
};

OS 滚动条的宽度是统一的，无论是垂直显示还是水平显示，因此您可以使用返回的宽度作为水平滚动条的高度。

编辑：我的原始代码同样不起作用，但是我已将我的代码更新为可以正常工作的功能。你可以在这里看到它的实际效果：http://jsbin.com/ejile3

页面会提示滚动条的宽度。

【讨论】：

感谢您的回答，但 BalusC 建议的 clientHeight 在这种情况下为我完成了这项工作。