How do I remove the height style from a DIV using jQuery?

Making use of 'auto'

Not just sanitizing the inline height, at times, you may want to intelligently set the element with its natural or CSS-defined height. Here's how:

$('#divId').css('height', 'auto'); // Giving control to Mr.Auto. Sweet!


It's good to remember that while .css('height', '') clears the inline style, setting it to 'auto' actively modifies the height based on content or inherited styles.

Compatibility assurance with jQuery versions

Insure you’re running jQuery 1.4 or later. Earlier versions might give you a cold shoulder here. Check your version with $.fn.jquery.

Other pathways to the goal

There is a more readable cousin of .css() that does the exact trick:

$('div#divId').height(''); // Makes height undefined again!


This straightforward function is a clean shortcut for .css('height', ''). Handy for giving height a chance to inherit from default CSS again.

The cross-browser peacekeeper

.css('height', 'auto') secures you from the drama of cross-browser discrepancies. This common language makes every browser put on the same default gear for an element's height.

Be specific, make your aim precise!

In a jungle of multiple DIVs, take the right aim! Use the required ID or class to ensure your jQuery does not go astray resetting heights of neighbors:

$('.content-div').css('height', ''); // Targets only the finest of classes!


Keeping it uncomplicated

For a light and direct approach, the .height('') function stands tall. It provides a simple lens to look at your code, cleaning any inline height styles without any fuss.

Symmetrical adjustments made easy

There are scenarios where you oscillate between a fixed height and auto for an element. jQuery has got your back for this symmetrical height dance:

var isAutoHeight = true;

$('#toggleHeight').click(function() {
  $('#divId').css('height', isAutoHeight ? '100px' : 'auto');
  isAutoHeight = !isAutoHeight;
}); // "To be or not to be", height edition.


Here you have a smooth toggle for the element's height, controlling every click event.

Guarding for pitfalls

Watch out for the DOM ready moment, and ensure your jQuery debuts only after the document loads completely. Bind your code inside a $(document).ready() function to avoid premature execution.

Performance matters

Although jQuery is a helping hand, it might not always be the swiftest. For performance-sensitive tasks, consider vanilla JavaScript, avoiding the overhead of the jQuery library. Remember, speed thrills but also kills, so choose wisely!