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个字段容纳的高度要大得多第2步有10个字段。

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

谢谢

Answer 1

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

问题肯定会得到解决。

Answer 2

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

基本上，你在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

如果有人在这些年后发现这个问题，问题仍然存在。以下是如何在不更新javascript的情况下修复它，仅使用css：

.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

Answer 4

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

.wizard＆gt; .content＆gt; .body {position：relative！important;}

Answer 5

将此添加到您的自定义 CSS

.wizard > .content > .body {position:relative !important;}

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

5 个答案: