jquery - 页脚不会推到表单中绝对定位的、可变高度的字段集下方

Question

我在处理多步骤表单时遇到了问题，我创建了一个简单的 fiddle 来重现我的问题。看来我的绝对定位字段集不允许将任何后续内容推到它们下面 - 因此导致它们彼此重叠。字段集的高度是可变的，否则我会为每个容器设置一个静态高度。

<form id="msform">

<!-- progressbar -->
<ul id="progressbar">
    <li class="active">Account Setup</li>
    <li>Social Profiles</li>
    <li>Personal Details</li>
    <div class="clearfix"></div>
</ul>

<!-- Absolute Positioned Fieldsets -->
<fieldset>
     <h2>Variable Height Fieldset (1/3)</h2>

    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
     <h2>Variable Height Fieldset (2/3)</h2>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
     <h2>Variable Height Fieldset (3/3)</h2>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>

<!-- This needs to push below the fieldsets -->
<footer class="tm-footer">Footer Content Here (Needs to be under the fieldsets)</footer>

我觉得解决方案可能是使用 javascript 并使容器匹配它需要的高度，具体取决于它的内容。有没有人可以就如何保留页脚和表单下方可能跟随的任何其他内容而不必为元素设置明确的高度提供一些见解？我觉得这应该很容易，但我很难过。

提前致谢。下面是一个简单的 fiddle 来复制这个问题。

示例:JSFiddle Here

Answer 1

有两种方法可以解决这个问题

1) 您在#msform 字段集上放置了 position:absolute 属性，这似乎是不需要的。如果您删除此属性，那么它将正常工作

Demo

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    width: 80%;
    margin: 20px 10%;
    /* position:absolute;*/
}

2) 如果你仍然想使用它，那么你需要在#msform 上添加 height:250px

Demo

#msform {
    margin: 30px auto;
    text-align: center;
    position:relative;
    height:250px;
}

希望这对您有所帮助!