如何为每个步骤的内容设置动态高度？

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属性,但它仍然不能完成我想要完成的任务.我想要的是高度足以容纳每一步的内容.

例如,假设我有2个字段用于步骤1,10个字段用于步骤2.在示例中,内容具有相同的高度,因此看起来很糟糕,其高度比2个字段容纳10个字段所需的高度大得多第2步.

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

谢谢

Answer 1

删除以下类中的height属性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");
});

这个问题肯定会得到解决.

Answer 2

我认为现有的答案有点陈旧; css文件看起来很不一样.在其他一些评论中发布的链接似乎对我有用.

基本上,您在validate css中找到这些块并使它们看起来像这样:

.wizard .content {
    min-height: 100px;
}
.wizard .content > .body {
    width: 100%;
    height: auto;
    padding: 15px;
    position: relative;
}

并使用您的javascript:

$(document).ready(function() {
    function adjustIframeHeight() {
        var $body   = $('body'),
            $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
    }

对我来说像冠军一样.相当惊讶,这还不是扩展的一部分.

Answer 3

只有一行CSS对我有用。它将自动调整每个部分的高度

.wizard> .content> .body {位置：相对！important;}

Answer 4

如果这些年后有人发现了此问题，问题仍然存在。以下是仅使用CSS而不更新JavaScript的方法：

.wizard .content {
    min-height: 100px;
}
.wizard .content > .body {
    width: 100%;
    height: auto;
    padding: 15px;
    position: absolute;
}
.wizard .content .body.current {
    position: relative;
}

src：https：//github.com/rstaib/jquery-steps/issues/8#issuecomment-368114763