Get div height without scrollbar

Question

Is it possible to get the height of a horizontal and vertically scrollable div without considering the horizontal scrollbar? I am trying to get the height of the visible part of my div.

Answer 1

try it

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 can search for window.getComputedStyle(element, null) . The documentation can be found on the mdn website.

An example would look like this:

 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 get the apparent width or height of an element.

• The first way is to use offsetHeight or offsetWidth : These guys return the VISIBLE height or width of your 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 are the same as above EXCEPT, they only return VISIBLE HEIGHT` or VISIBLE WIDTH AND PADDING, but without borders, scroll bars and fields.

Referrences:

clientWidth

clientHeight

offsetWidth

offsetHeight

Hope this helps

Answer 4

you can use overflow-y for vertical or overflow-x for horizontal

 overflow-y:scroll;