Get div height without height set in css

Question

Is there a way to get the height of an element if there is no CSS height rule for the element that I cannot use the .hight () jQuery method because it needs to set the CSS rule first? Is there any other way to get the height?

Answer 1

jQuery .height will return you the height of the element. It does not require a CSS definition because it determines the calculated height.

Demo

You can use .height() , .innerHeight() or outerHeight() based on what you need.

.height() - returns the height of the element, excluding indents, borders and fields.

.innerHeight() - returns the height of the element, including padding, but excludes border and margin.

.outerHeight() - returns the height of the div, including the border, but excludes the margin.

.outerHeight(true) - returns the height of the div, including the margin.

Check out the code snippet below for a live demo. :)

 $(function() { var $heightTest = $('#heightTest'); $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"') .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>') .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>') .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>') .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>') }); 

 div { font-size: 0.9em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; "> </div> 

Answer 2

Just a note in case others have the same problem.

I had the same problem and found a different answer. I found that getting the height of a div, the height of which is determined by its contents, you need to start with window.load or window.scroll not document.ready , otherwise I get odd heights / lower heights, i.e. before uploading images. I also used externalHeight () .

 var currentHeight = 0; $(window).load(function() { //get the natural page height -set it in variable above. currentHeight = $('#js_content_container').outerHeight(); console.log("set current height on load = " + currentHeight) console.log("content height function (should be 374) = " + contentHeight()); }); 

Answer 3

Also make sure the div is added to the DOM and visible .

Answer 4

You can do this in jQuery . Try all .height() , .innerHeight() or .outerHeight() .

 $('document').ready(function() { $('#right_div').css({'height': $('#left_div').innerHeight()}); }); 

Screenshot example

Hope this helps. Thank!!