动画后的响应式自动高度容器

Question

我通过 javascript 更改元素的高度（无法通过 css 将其从 0 更改为 auto）。

/* Function to animate height: auto */
function autoHeightAnimate(element, time){
    var curHeight = element.height(), // Get Default Height
        autoHeight = element.css('height', 'auto').height(); // Get Auto Height
          element.height(curHeight); // Reset to Default Height
          element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height
}

调整 Chrome 窗口大小后，该元素不会自动更改其高度，因为它仅在我单击其中一个标签后才会更改。 DEMO这里。

是否可以通过 css 以某种方式做到这一点？如果不是，如何在我缩放浏览器窗口后通过 javascript/jQuery 进行更改？

Answer 1

在这种情况下，您可以使用调整大小功能并在调整大小时设置高度，如下所示：

$( window ).resize(function() {
      autoHeightAnimate('','');
});