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

我正在使用 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;
}

我已经调整了最小高度和溢出属性,但仍然没有做我想要完成的.我想要的是只有高度足够容纳每一步的内容的高度.

例如,说我的步骤1有2个字段,步骤2有2个字段.在这些例子中,内容是相同的高度,所以看起来可怕的高度比2个字段要容纳10个字段要大得多第2步.

如果我删除最小高度属性,没有内容显示. Jquery步骤需要一个固定的高度来处理所有步骤吗？我希望有一种方式使高度动态地适应每个单独步骤的高度.

谢谢

解决方法

在jquery.steps.css中删除以下类的height属性：

.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");
});

这个问题肯定会解决.

原文地址：https://www.jb51.cc/jquery/176422.html