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

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;
}

我已经调整了最小高度和溢出属性，但仍无法实现我想要的效果。我希望每个步骤的高度只够容纳内容。

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

如果我删除最小高度属性，则根本没有内容显示。Jquery steps是否需要固定高度才能适用于所有步骤？我希望有一种方法可以使高度动态地适应每个单独步骤的高度。

谢谢

- sfuptown

Answer 1

只需一行css代码，即可实现对每个部分自动调整高度。

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

- Arman Hakim Sagar

Answer 2

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

这个问题肯定会被解决。

- krb

---

http://stackoverflow.com/questions/23799170/reducing-min-height-in-jquery-steps-plugin/23823065#23823065 - krb

请注意，还要从.wizard > .content中删除min-height: 35em;属性。 - sfuptown

毫不羞耻地从 https://github.com/rstaib/jquery-steps/issues/8#issuecomment-37063410 偷来，甚至没有提及它。 - maltem-za

谢谢！你获得了新的 +1 :) - X9DESIGN

@Manolo 哈哈。是的，他在重复他自己的问题答案，这个答案是他链接的，而且仍然是从GitHub问题评论中逐字复制和粘贴的。正确的做法应该是粘贴答案的链接，而不是声称它是自己的。我希望你能看到讽刺的是，你称我为名誉贪婪者，因为显然我非常努力地维护我的声誉。 - maltem-za

Answer 3

如果有人在这么多年后发现了这个问题，那么这个问题仍然存在。 以下是如何使用仅CSS修复它而无需更新JavaScript：

.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

- Oussama

---

这对我来说在步骤改变时会产生奇怪的闪烁。我使用了@Arman上面的答案。 - PowerMan2015

这最近对我有效，使用jQuery Steps v1.1.0 - 09/04/2014。 - Dan V

Answer 4

我认为这些现有的答案有点过时了，CSS文件看起来大不相同。在一些其他评论中发布的链接对我很有用。

基本上，您需要在验证 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());
        }
    }

对我来说很管用。非常惊讶这不是扩展的一部分。

- Eric

---

尝试了奇怪的（和被盗的）标记答案没有成功后，我尝试了这个并且完美地工作了。只需要添加CSS规则，而不是脚本。 - Manolo

这个代码完美运行，如果我们添加"overflow: auto"规则，对于移动用户来说是一个加分项。.wizard .content { min-height: 100px; overflow: auto; } - Mitch3091

仅 CSS 规则无效。在 JavaScript 中，“iframe”是什么，你在哪里调用它？ - Heemanshu Bhalla

Answer 5

将以下内容添加到您的自定义CSS中。

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

- Ali akhound

Answer 6

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

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

确保也添加这个，它会解决问题：

.wizard > .content { min-height: inherit !important; }

- fraxool

Answer 7

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

通过使用这种方式，您将避免动画中的错误，它只会在滚动时使显示的页面相对，并再次变为绝对。

- İsmail KARAGÖZ

Answer 8

只需将以下内容添加到您的CSS中：

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

- Abdul Rehman Zaheer