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.

Answer 1

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/

Answer 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

Answer 3

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

1. 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

2. 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:

clientWidth

clientHeight

offsetWidth

offsetHeight

Hope this helps