Get full height of a clipped DIV

Question

How do I get the height of the div which includes the clipped area of the div ?

<div style="height: 20px; overflow: hidden">
  content<br>content<br>content<br>
  content<br>content<br>content<br>
  content<br>content<br>content<br>
</div>

for anyone looking for the better approach skip the accepted answer and try the @Colt answer. — Arash Milani, May 26 '13 at 01:57
Except that answer uses jQuery, and this question did not ask anything about jQuery. — L0j1k, Jun 09 '14 at 19:29
I think the point was in the use of `scrollHeight`... not the *jQuery* — Giraldi, Jun 16 '16 at 07:28

tomsseisums · Accepted Answer · 2011-01-06T09:02:49.783

Well, you cannot do it that way, but it's possible when adding a inner element to your container, like this:

<div id="element" style="height: 20px; overflow: hidden;">
    <p id="innerElement"> <!-- notice this inner element -->
        content<br />content<br />content<br />
        content<br />content<br />content<br />
        content<br />content<br />content<br />
    </p>
</div>

sidenote: wrapping content inside paragraphs is a good practice too, plus that one extra element isn't giving that much of problems, if any at all...

And JavaScript:

var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);

P.S. For this JavaScript to work, put it after your #element div, because plain JavaScript is executed before DOM is ready if it's not instructed to do so. To make this work when DOM is ready, check this.

But I'd suggest getting jQuery, it will come in handy later on if you're going to extend JavaScript operations in your site.

Plus, jQuery is the power, for real!

That way, simply add this script to your <head /> (assuming you've jQuery included):

$(document).ready(function() {
 var innerHeight = $('#innerElement').height();
 alert(innerHeight);
});

Example @jsFiddle using jQuery way!

Yep. Looks like this is the best way to do it. Thanks. Oh and yes, I love jQuery. Lovely library. — Prakash Raman, Jan 06 '11 at 09:13
Tip: (This just caught me out) if you keep getting 0 returned from height or offsetHeight, make sure that you have set your elements to be visible before you do the measuring. — Martin Belcher - AtWrk, Oct 30 '12 at 20:25
It's not necessary to add an inner element, the scrollHeight property contains the height of the element including the clipped area. — Mathijs, Jan 27 '20 at 09:56

score 49 · Answer 2 · answered Apr 11 '11 at 20:39

49

This works in all cases, whether you have a text node inside or a container. This is using jquery, but you don't need to.

//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();

$('#elem')[0] is returning the dom element from the jquery call. so you can use that on any dom elem using plain ol' javascript.

answered Apr 11 '11 at 20:39

Colt

499
4
2

1

The trick is in the scrollHeight property here, which contains the height of the element before clipping. The property is available without jQuery. – Mathijs Jan 27 '20 at 09:58
Thank you! I tried without [0] and got undefined... – user2812532 Mar 10 '22 at 21:08

score 8 · Answer 3 · answered Jan 06 '11 at 09:05

8

Here is one way to achieve what you need, using Fabian idea:

function GetHeight() {
    var oDiv = document.getElementById("MyDiv");
    var sOriginalOverflow = oDiv.style.overflow;
    var sOriginalHeight = oDiv.style.height;
    oDiv.style.overflow = "";
    oDiv.style.height = "";
    var height = oDiv.offsetHeight;
    oDiv.style.height = sOriginalHeight;
    oDiv.style.overflow = sOriginalOverflow;
    alert("Real height is " + height);
}

Live demo and test case: http://jsfiddle.net/yahavbr/7Lbz9/

answered Jan 06 '11 at 09:05

Shadow The GPT Wizard

66,030
26
140
208

Yep, this would do. Although was hoping I would not need to remove the overflow before calculate the height. – Prakash Raman Jan 06 '11 at 09:14
Actually, this happens to solve my problem perfectly, as the speed at which the overflow is set/reset does not put in a scroll – Prakash Raman Jan 06 '11 at 09:21
@Prakash as I'm only setting a variable then set the original overflow and height back, it's done within one "tick" of the CPU so user won't see any change in UI. – Shadow The GPT Wizard Jan 06 '11 at 09:25

score 5 · Answer 4 · answered Jun 30 '20 at 21:39

5

Use scrollHeight of the element instead of clientHeight or offsetHeight.

Wrapping the content approach is better though.

answered Jun 30 '20 at 21:39

Vishwajeet

311
3
5

Fantastic! Thank you! – Alex Mckay Jan 22 '21 at 01:39

score 2 · Answer 5 · answered Jan 06 '11 at 08:37

2

Thats not possible afaik. What you could try is to remove that style and set it using javascript after you got the height. Not the most elegant solution, but i think its the only one.

answered Jan 06 '11 at 08:37

Fabian

13,603
6
31
53

I gave flesh and bones to that idea, IMO it's elegant enough when wrapped nicely into a function. :) – Shadow The GPT Wizard Jan 06 '11 at 09:07

score 0 · Answer 6 · answered May 09 '20 at 12:30

Native Javascript. Supported as far back as MSIE 6:

<div id="cont" style="width:100px;height:100px;overflow:auto;border:#000 solid 1px;">
    <div style="height:1500px;">dddd</div>
</div>


<script>alert(document.getElementById('cont').scrollHeight)</script>

Get full height of a clipped DIV

6 Answers6

Linked