css - 页脚在 Bootstrap 模式/ Accordion 中始终可见

Question

Codepen

你好，

我正在拼命寻找一个简单的解决方案来解决我的问题，我的代码可以在 codepen 上找到。

// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
   border: none;
   max-height: 300px;
   overflow-y: scroll;
}

目标是保持粉红色页脚始终可见(粘贴在屏幕底部)，即使内容太大(如面板 3 打开时)也是如此。

我尝试在内容太大时放置垂直滚动条，但我不确定如何以最佳方式使用最大高度(目前为 300 像素，第 84 行)。

这个解决方案并没有真正起作用，它不适合大屏幕的人(因为 max-height: 300px ...)。

是否可以直接在 CSS 中做我想做的事？如果是这样，你能指导我吗？

或者您认为 Javascript 是强制性的？面板的背景灰色必须以任何分辨率覆盖整个区域，一直到底部。

谢谢!

Answer 1

在我看来，您应该将页脚从模态中分离出来并单独显示，因为模态已经是一个固定元素。您可以连接到 js 模态事件并仅在模态打开时显示此独立页脚。

.modal-footer.outer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: #fff;
}

http://codepen.io/anon/pen/XpbYeE

您的模态页脚正在被修复，它实际上表现正常，问题是它仍然是另一个固定项的子项 - 模态本身，因此当视口(viewport)变得太小时它会分离 parent 。

http://g.recordit.co/pyMEfO94wE.gif