Menu
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> 
888
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
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!
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
