滚动时，Bootstrap面板页脚和正文重叠

Question

我在一个部分中使用Bootstrap面板，面板正文的overflow-y为scrollable。 因此，当我滚动时，页脚和正文内容似乎重叠。

    <section class="panel panel-featured">
      <header class="panel-heading">
        <div class="panel-actions"><a href="#" class="fa fa-caret-down"></a></div>
        <h2 class="panel-title">Test Data</h2>
      </header>
      <div class="panel-body custom-scroll" style="max-height: 332px;">

        <div class="col-md-12"> Testing div</div><div class="col-md-12"> Testing div</div>

        <div class="col-md-12"> Testing div</div><div class="col-md-12"> Testing div</div>
      </div>


      <footer class="panel-footer text-right">
        <button type="button" class="btn btn-primary">
          Hit Me
        </button>
      </footer>
    </section>

我尝试使用Z-index解决此问题。滚动面板主体时有没有办法消除这种重叠？

请帮忙。提前谢谢。

Answer 1

如果设置overflow-y:scroll，它似乎工作正常..

http://codeply.com/go/np6EMwca4p

Answer 2

在overflow:scroll课程上设置.panel-body custom-scroll而不是body。 有jsbin.

Answer 3

这里的问题是从一些自定义文件中将一个额外的类应用于模态页脚，即

.modal-footer {
   margin-top: -5px;
}

这就是重叠的原因。