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?
19 Answers
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)
3$('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.
2you can try this:
$('div#someDiv').height('');maybe something like
$('div#someDiv').css("height", "auto");To reset the height of the div, just try
$("#someDiv").height('auto');
$('div#someDiv').css('height', '');just to add to the answers here, I was using the height as a function with two options either specify the height if it is less than the window height, or set it back to auto
var windowHeight = $(window).height();
$('div#someDiv').height(function(){ if ($(this).height() < windowHeight) return windowHeight; return 'auto';
});I needed to center the content vertically if it was smaller than the window height or else let it scroll naturally so this is what I came up with
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('');
$('div#someDiv').removeAttr("height");
