98

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?

1
  • 1
    I can't get this to work either. It seems that after you set the height of the div to something specific (like 300px or whatever), you can't set the height back to auto. Might be a jQuery bug. Nov 6, 2009 at 15:09

10 Answers 10

113

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
  • 6
    You gave three solutions, I can confirm setting height to "" works, don't know about the others. Apr 24, 2011 at 7:35
  • 2
    In jQuery 1.9 using '' but using null does not. Mar 4, 2013 at 19:13
  • 1
    There are subtle differces: 1+2 lets revices thew stlyesheet (if anything is defined there), 3 overrides it (as the attrib set to auto has higher precedence)
    – Frank N
    Nov 17, 2014 at 14:12
26
$('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.

2
  • 2
    This forces the height to be the auto height, overriding any existing CSS rules. That may be OK in some specific instances, but in general it could cause problems. Sep 11, 2015 at 4:24
  • @BennettMcElwee I'm actually struggling with the issue you described now. So +1 for that. Jan 18, 2017 at 18:13
24

you can try this:

$('div#someDiv').height('');
1
  • 6
    that should be correct anwser as this one removes css() style value, it is usefull on resizing with js :) Cheers, thanks
    – Szymon
    May 27, 2016 at 19:47
21

maybe something like

$('div#someDiv').css("height", "auto");
1
  • 2
    That will override any existing CSS rules that should apply, which may be a problem. Sep 11, 2015 at 4:22
14

To reset the height of the div, just try

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

1
  • This is a duplicate of @nonrectangular's answer, which predates this edit. Sep 11, 2015 at 4:20
5
$('div#someDiv').css('height', '');
0
0

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

0

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

0

I personally use unset

$('some-element').css('height', 'unset');

You may refer to this doc

-6
$('div#someDiv').removeAttr("height");
3
  • i don't think this will work for a css height style that is embedded within a a style attribute...
    – topwik
    Nov 1, 2011 at 18:28
  • If anything, you'd want to removeAttr("style")
    – jigglyT101
    Jan 10, 2014 at 23:59
  • This does work and is the best option however if (unlike the question here) you're trying to remove a height="XX" HTML attribute Aug 22, 2016 at 1:11

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.