jQuery .height()方法无法修改div高度问题求助

嘿，我来帮你捋捋这个问题！既然点击时alert能正常弹出，说明你的事件绑定和触发逻辑完全没问题——问题肯定出在CSS设置或者jQuery修改高度的细节上。我整理了几个最常见的原因和对应的解决办法：

1. CSS过渡动画（transition）干扰了height: auto的生效 #

这是最容易踩的坑！如果你的目标div在CSS里设置了transition: height ...（比如用来做展开收起的平滑动画），直接设置height: auto是不会生效的——因为浏览器没法计算从0到auto的过渡数值，所以会直接忽略这个修改。

解决办法：

• 如果需要保留动画：先获取div内容的真实高度（用原生的scrollHeight属性），再把高度设置为这个具体数值：

  $(function() {
    $('#team-ch').click(function() {
      const $target = $('#team-camb-hert');
      // 获取内容的真实高度（包括被隐藏的部分）
      const actualHeight = $target[0].scrollHeight;
      $target.height(actualHeight);
    });
  });
  

• 如果不需要动画：可以先临时移除过渡属性，再设置height: auto：

  $(function() {
    $('#team-ch').click(function() {
      $('#team-camb-hert').css({
        transition: 'none',
        height: 'auto'
      });
    });
  });
  

2. CSS优先级冲突（比如!important） #

如果你的CSS里给目标div的height加了!important，比如：

#team-camb-hert {
  height: 0 !important;
  overflow: hidden;
}

那jQuery设置的行内样式（style="height: auto;"）优先级会被!important覆盖，自然无法修改高度。

解决办法：

• 优先去掉CSS里的!important，用更具体的选择器来控制样式优先级；
• 应急情况下可以在jQuery里强制添加!important（不推荐长期使用）：

  $('#team-camb-hert').css('height', 'auto !important');
  

3. jQuery的height()方法和css()方法的差异 #

有时候用height('auto')可能不如直接用css('height', 'auto')可靠——前者是jQuery封装的方法，后者直接操作CSS属性，逻辑更直接。可以试试替换写法：

$(function() {
  $('#team-ch').click(function() {
    $('#team-camb-hert').css('height', 'auto');
  });
});

4. 目标div没有内容或者存在margin折叠 #

如果div里没有任何实际内容，那height: auto的结果还是0，看起来就像没变化。另外，如果div的子元素有margin-top，可能会触发margin折叠，导致div的高度还是0。

解决办法：

• 检查div内是否有实际内容（可以临时给div加个背景色直观查看）；
• 给目标div添加overflow: auto或者padding-top: 1px来触发BFC，解决margin折叠问题。

内容的提问来源于stack exchange，提问作者lewisnewson