如何使用jQuery从DIV中删除高度样式?

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

默认情况下，DIV的高度由其内容决定。

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

但是，我重写了它，并显式地用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?

我怎么能逆转它呢?我想去掉高度样式，让它回到自动/自然高度?

9 个解决方案

#1

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)

与jQuery 1.4(检查)

#2

$('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.

我喜欢使用这个方法，因为它与您如何显式地使用.height(val)设置它是对称的，并且可以跨浏览器工作。

#3

maybe something like

也许就像

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

#4

you can try this:

你可以试试这个:

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

#5

To reset the height of the div, just try

要重置div的高度，只需尝试。

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

$(" # someDiv ").height(“汽车”);

#6

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

$(' div# someDiv”)。css(‘高’,”);

#7

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

为了补充这里的答案，我使用高度作为一个函数，有两个选项，要么指定小于窗口高度的高度，要么将其设置为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

我需要把内容垂直居中如果它小于窗口高度或者让它自然滚动这就是我的想法

#8

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.

谢谢大家展示这些例子。在尝试了您的示例之后，我在小媒体屏幕上的联系人页面(比如480px以下)仍然有问题。靴带不断插入高度:自动。

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.

在我的案例中，我看到的是:#contact。浏览器窗口中的联系人容器| 303 x 743。

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

因此，以下的全文可以消除这个问题:

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

$('节# contact.contact-container ').height(“);

#9

-6

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

#1