Get div height without the scrollbar

Question

Is it possible to get the height of an horizontally and vertically scrollable div without taking into account the horizontal scrollbar ? I am trying to get the height of the visible portion of my div.

It is not exactly the same, but this deals with getting width from one with a vertical bar, and you could likely implement a similar solution. http://stackoverflow.com/questions/10692598/how-to-get-innerwidth-of-an-element-in-jquery-without-scrollbar Basically, it recommended putting a div inside the other, make the width (or in your case the height) 100%, and you can give it zero width, and then get the height of the inside one. — rp.beltran, Dec 22 '14 at 01:57

score 4 · Accepted Answer · answered Dec 22 '14 at 01:59

4

try this

html

<div class="div1">
    <div class="div2"></div>
</div>

using jQuery

var width = $('.div1')[0]['clientWidth'];
var height = $('.div1')[0]['clientHeight'];

working demo http://jsfiddle.net/7xmun47a/

answered Dec 22 '14 at 01:59

Alien

3,658
1
16
33

score 2 · Answer 2 · answered Dec 22 '14 at 02:03

2

I think you might be looking for window.getComputedStyle(element, null). The documentation can be found on mdn documentation's site.

An example would look like:

var container = document.getElementById("whatever");
var computed = window.getComputedStyle(container, null).getPropertyValue("height");
// or pass width to getPropertyValue

This should give you the width minus the scrollbars.

jsbin example

answered Dec 22 '14 at 02:03

psdpainter

631
1
10
25

does not work for mozilla it is including the height and width of the scroll bar as well – Srinivas Rathikrindi Jan 24 '17 at 11:59

score 2 · Answer 3 · answered Dec 22 '14 at 02:09

There are actually two ways to retrieve the visible width or height of an element.

The first way is to use offsetHeight or offsetWidth: These guys return the VISIBLE height or width of you element including: BORDER, PADDING, SCROLLBAR AND MARGIN.

You use them like this yourDiv.offsetHeight

The second way is to use clientHeight or clientWidth: These ones are the same as the ones above EXCEPT they only return the VISIBLE HEIGHT` or VISIBLE WIDTH AND PADDING but without borders, scrollbar, and margins.

Referrences:

Hope this helps