jquery-steps - 如何为每一步设置内容的动态高度？

Question

我正在使用 Jquery 步骤向导插件。我遇到的问题是向导的每一步都有不同高度的内容。示例中包含的用于控制内容高度的 css 是

.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

我已经调整了 min-height 和 overflow 属性，但它仍然没有做我想要完成的事情。我想要的是高度仅足以容纳每一步的内容。

例如，假设我有第 1 步的 2 个字段和第 2 步的 10 个字段。在示例中，内容的高度都相同，因此它看起来很糟糕，因为它的高度比 2 个字段容纳 10 个字段所需的高度大得多第2步。

如果我删除 min-height 属性，则根本不会显示任何内容。 Jquery 步骤是否需要固定高度才能适用于所有步骤？我希望有一种方法可以使高度动态化以适应每个步骤的高度。

谢谢

Answer 1

在 jquery.steps.css 中删除以下类的高度属性:

.wizard > .content > .body{height:95%;}

在- jquery.steps.js搜索:

stepTitles.eq(state.currentIndex)
  .addClass("current").next(".body").addClass("current");

应该在第 844 行附近。紧接着，添加:

stepTitles.eq(state.currentIndex).next(".body")
    .each(function () {
    var bodyHeight = $(this).height();
    var padding = $(this).innerHeight() - bodyHeight;
    bodyHeight += padding;
    $(this).after('<div class="' + options.clearFixCssClass + '"></div>');
    $(this).parent().animate({ height: bodyHeight }, "slow");
});

问题肯定会得到解决。