页脚不会压入窗体内的绝对定位、可变高度的字段集之下

Question

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

<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，并使容器根据其内容匹配所需的高度。有没有人可以提供一些洞察如何保持页脚和任何其他内容可能遵循的形式，而不必设置一个明确的高度的元素？我觉得这应该很容易，但我被难住了。

提前谢谢你。下面是一个简化的小提琴来复制这个问题。

示例：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;
}

希望这能有所帮助！