Question

Codepen

您好，

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

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

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

当内容太大时，我尝试放置垂直滚动，但我不确定如何以最佳方式使用max-height（目前为300px，第84行）。

此解决方案不起作用，不适合大屏幕的人（因为最大高度：300px ......）。

是否可以直接在CSS中执行我想要的操作？如果是的话，你可以指导我吗？

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

谢谢！

Answer 1

class

你的模态体可以滚动，以保持页脚始终可见。你可以使用你想要的任何高度。

Answer 2

在我看来，你应该从模态中打破页脚并单独显示它，因为模态已经是一个固定的元素。您可以挂钩js模态事件，并仅在打开模态时显示此独立页脚。

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

你的模态页脚是fixed，它实际上表现得很好，问题是它仍然是另一个固定项目的子项 - 模态本身，因此当视口对于父项太小时会分离。