How do I remove the height style from a DIV using

Question

By default, a DIV's height is determined by its contents.

But, I override that and explicitly set a height with jQuery:

$('div#someDiv').height(someNumberOfPixels);

How can I reverse that? I want to remove the height style and to make it go back to it's automatic/natural height?

Answer 1

Thank guys for showing all those examples. I was still having trouble with my contact page on small media screens like below 480px after trying your examples. Bootstrap kept inserting height: auto.

Element Inspector / Devtools will show the height in:

element.style {

}

In my case I was seeing: section#contact.contact-container | 303 x 743 in the browser window.

So the following full-length works to eliminate the issue:

$('section#contact.contact-container').height('');

Answer 2

maybe something like

$('div#someDiv').css("height", "auto");

Answer 3

you can try this:

$('div#someDiv').height('');

Answer 4

to remove the height:

$('div#someDiv').css('height', '');
$('div#someDiv').css('height', null);

like John pointed out, set height to auto:

$('div#someDiv').css('height', 'auto');

(checked with jQuery 1.4)

Answer 5

$('div#someDiv').css('height', '');

Answer 6

$('div#someDiv').height('auto');

I like using this, because it's symmetric with how you explicitly used .height(val) to set it in the first place, and works across browsers.