当我在这个 Twitter BootStrap 页面中展开页脚时，为什么页脚会出现在手风琴内容上？

Question

我是 Twitter BootStrap 的新手，但遇到以下问题让我抓狂。

你可以在这个 JSFiddle 中看到问题：https://jsfiddle.net/AndreaNobili/uso4f4xk/

如您所见，我有一个手风琴和一个页脚，必须在页面末尾，这是：

<div class="footerDiv">
    <div class="row footerRow">

        <p>FOOTER TEST</p>

    </div>
</div>

把它放在我的页面底部，我正在尝试使用这个 CSS 设置：

.footerDiv {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   
}

但它似乎无法正常工作，因为当我展开手风琴的选项卡时，页脚出现在手风琴内容上。

我不知道如何解决这种情况。我正在考虑在用户展开手风琴并在页面内容上再次设置时使用 JavaScript\JQuery 来计算新的页面高度，但我认为这很疯狂（我不知道它是否可以工作）

为什么我会出现这种行为？我该如何解决这个问题？

Tnx

Answer 1

只需从 class footerDiv 的样式中删除 bottom:0; 属性。它会起作用的。万事如意

Answer 2

position:absolute替换为position:relative

.footerDiv {
 position:relative;
 bottom:0;
 width:100%;
 height:60px;
}