How do I get the height of a <DIV> not including the horizontal scrollbar using JQuery?

Question

I am writing a jQuery plugin which makes use of two nested <DIV> elements.

The outer div has a fixed width with overflow:scroll and the inner div (which is much wider) contains the content which I want to scroll around.

This all works fine apart from the fact that I want to use some JavaScript (with jQuery) to set the height of the inner div to exactly match the height of the outer div, less the height of the horizontal scroll bar.

At the moment I'm setting it to the height of the outer div, less about 20 pixels. This sort of works, but it's not going to be browser independent and is definately a hack!

Any help would be very much appreciated!

Answer 1

You need to use element.clientHeight. In jQuery that would be something like:

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