How to check if a div has fluid / auto height?

Question

I need to check javascript (or maybe jQuery) if the div has css height:auto property, or maybe check if this div is set to any height? But in fact, the browser acts as if it continues to calculate the current height of the div, and then assigns it to that div. Thus, in fact, a div always has a height, even if in css we said that the div should be in height:auto . How can i do this?

Answer 1

Here is my solution that I have successfully implemented in my jQuery plugin, ScaleText :

  function checkAutoHeight(el) { // Get the original height of the parent. var origHeight = $(el).parent().outerHeight(); // Create a 1px bump in the size of the element you are checking. var tester = $(el).append('<div class="scaleTextHeightCheck" style="display: block; height: 1px; width: 1px; content: \'\';""></div>'); // Check to see if the parent increased by 1px as a result of the bump. var newHeight = $(el).parent().outerHeight(); // Cleanup. $('.scaleTextHeightCheck').detach(); // Return the result. return (origHeight < newHeight); } 

Answer 2

Check the values ​​of one of the following options to see if they can help you.

 document.getElementById ( 'divid' ).style.height $('#divid').css ( 'height' ) $('#divid')[0].style.height 

Obviously division is the id of your div

Answer 3

you can do this in IE using the currentStyle attribute

 var height= document.getElementById('divid').currentStyle.height; 

Unfortunately, you cannot do this in any other browser (I think this is the only thing I like in IE). In fact, you can do it, but not directly.

In other browsers, the following exists:

first you need to check the built-in attribute of height (it can be a table that is allowed to use it), then you need to find the built-in attribute of the style and check if it has a certain height. Then you need to iterate over all the styles of your document and determine a more strict mechanism, and also check if there is another less strict, but with an important modifier.

As you can see, this is not an easy process, so it is possible in other browsers, but not easy. If you are only targeting IE, then you are done :-)

Good luck

Answer 4

I struggled with this yesterday, but I found a hack that works.

Plugin

 $.fn.isAuto = function(){ var originalHeight = this.height(); this.append('<div id="test"></div>'); var testHeight = originalHeight+500; $('#test').css({height: testHeight}); var newTestHeight = $('#test').height(); var newHeight = this.height(); $('#test').remove(); if(newHeight>originalHeight){ return true; } else{ return false; } }; 

Here is a fiddle demonstrating the plugin.

Basically, the plugin adds a div inside the source element and gives it a height greater than the original element. If the source element of the new height is greater than the original height, the element increases and the height automatically.

Answer 5

In jQuery $('#mydiv').css('height'); you will get the height <div id="mydiv"></div>