100

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

Ikhlak S.
  • 8,578
  • 10
  • 57
  • 77
Samuel Lopez
  • 2,360
  • 6
  • 29
  • 39

4 Answers4

237

jQuery .height will return you the height of the element. It doesn't need CSS definition as it determines the computed height.

DEMO

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

enter image description here

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

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

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

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

Check below code snippet for 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>
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • hello all is there a solution for this without jquery, using vanilla js? Have the same problem with elements without a specific height set. Every height calculation function here returns only zero for me. – Alex Aug 11 '22 at 09:52
37

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 that's height is determined by its contents needs to be initiated on window.load, or window.scroll not document.ready otherwise i get odd heights/smaller heights, i.e before the images have loaded. I also used outerHeight().

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());   

});
Nam G VU
  • 33,193
  • 69
  • 233
  • 372
Iamsamstimpson
  • 1,359
  • 2
  • 17
  • 32
  • 1
    Probably you're getting odd heights because there are more instructions that change the height after you have used/printed them. It's recommended to ask for heights at the end of your script – Gjaa Feb 17 '15 at 00:30
12

Can do this in jQuery. Try all options .height(), .innerHeight() or .outerHeight().

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

Example Screenshot

enter image description here

Hope this helps. Thanks!!

Madan Sapkota
  • 25,047
  • 11
  • 113
  • 117
9

Also make sure the div is currently appended to the DOM and visible.

ItachiUchiha
  • 36,135
  • 10
  • 122
  • 176
Tom Scholes
  • 99
  • 1
  • 1