Get full height of a clipped DIV
JavascriptHtmlJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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);
});
Solution 2 - Javascript
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.
Solution 3 - Javascript
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/
Solution 4 - Javascript
Use scrollHeight of the element instead of clientHeight or offsetHeight.
Wrapping the content approach is better though.
Solution 5 - Javascript
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.
Solution 6 - Javascript
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>