15

我正在使用 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 步骤是否需要固定高度才能适用于所有步骤？我希望有一种方法可以使高度动态以适应每个单独步骤的高度。

谢谢

4

6 回答 6

20

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

问题肯定会得到解决。

于 2014-05-27T20:18:48.020 回答
18

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

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

于 2018-04-15T02:32:52.790 回答
11

我认为这些现有的答案有点过时了；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());
        }
    }

对我来说就像一个冠军。很惊讶这还不是扩展的一部分。

于 2015-12-06T08:37:43.353 回答
10

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

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

源代码：https ://github.com/rstaib/jquery-steps/issues/8#issuecomment-368114763

于 2018-03-27T15:16:17.937 回答
0

将此添加到您的自定义 CSS

.wizard > .content > .body {position:relative !important;}
于 2021-05-28T05:26:08.420 回答
0

根据其他答案，仅添加此行是不够的：

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

确保也添加这个，它会做的伎俩：

.wizard > .content { min-height: inherit !important; }
于 2021-10-21T08:31:50.070 回答