如何使用 jQuery 从 DIV 中删除高度样式？答案

【问题标题】：How do I remove the height style from a DIV using jQuery?如何使用 jQuery 从 DIV 中删除高度样式？
【发布时间】：2010-10-22 16:40:29
【问题描述】：

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

但是，我覆盖它并使用 jQuery 显式设置高度：

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

我怎样才能扭转这种局面？我想删除高度样式并让它回到它的自动/自然高度？

【问题讨论】：

我也无法让它工作。似乎在将 div 的高度设置为特定的值（如 300px 或其他）之后，您无法将高度设置回 auto。可能是一个 jQuery 错误。

标签： jquery html css layout

【解决方案1】：

可能是这样的

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

【讨论】：

这将覆盖任何应该应用的现有 CSS 规则，这可能是个问题。

【解决方案2】：

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

【讨论】：

我认为这不适用于嵌入在样式属性中的 CSS 高度样式...
如果有的话，你会想要 removeAttr("style")
这确实有效，并且是最好的选择，但是如果（与此处的问题不同）您尝试删除 height="XX" HTML 属性

【解决方案3】：

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

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

【讨论】：

这是@nonrectangular 的答案的副本，该答案早于本次编辑。

【解决方案4】：

移除高度：

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

就像约翰指出的那样，将高度设置为auto：

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

（使用 jQuery 1.4 检查）

【讨论】：

你给出了三个解决方案，我可以确认设置高度为“”有效，其他的不知道。
在 jQuery 1.9 中使用 '' 但使用 null 没有。
有细微的差别：1+2 允许修改样式表（如果那里定义了任何内容），3 覆盖它（因为设置为 auto 的属性具有更高的优先级）

【解决方案5】：

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

我喜欢使用它，因为它与您首先明确使用 .height(val) 设置它的方式是对称的，并且可以跨浏览器使用。

【讨论】：

这会强制高度为自动高度，覆盖任何现有的 CSS 规则。在某些特定情况下这可能没问题，但总的来说可能会导致问题。
@BennettMcElwee 我实际上正在努力解决您现在描述的问题。所以+1。

【解决方案6】：

你可以试试这个：

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

【讨论】：

这应该是正确的答案，因为这个删除了 css() 样式值，它在使用 js 调整大小时很有用 :) 干杯，谢谢

【解决方案7】：

只是为了在此处添加答案，我将高度用作具有两个选项的函数，如果高度小于窗口高度，则指定高度，或者将其设置回自动

var windowHeight = $(window).height();
$('div#someDiv').height(function(){
    if ($(this).height() < windowHeight)
        return windowHeight;
    return 'auto';
});

如果内容小于窗口高度，我需要将内容垂直居中，否则让它自然滚动，这就是我想出的

【讨论】：

【解决方案8】：

感谢大家展示所有这些示例。在尝试了您的示例后，我仍然在 480 像素以下的小型媒体屏幕上的联系页面出现问题。 Bootstrap 不断插入height: auto。

Element Inspector / Devtools 将在以下位置显示高度：

element.style {

}

就我而言，我在浏览器窗口中看到：section#contact.contact-container | 303 x 743。

因此，以下全长可以解决该问题：

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

【讨论】：

【解决方案9】：

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

【讨论】：