在 Bootstrap 模式/手风琴中始终可见页脚答案

【问题标题】：Footer always visible in Bootstrap modale/accordion在 Bootstrap 模式/手风琴中始终可见页脚
【发布时间】：2021-01-26 00:23:17
【问题描述】：

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 行）。

这个方案真的不行，不适合大屏的（因为max-height: 300px ...）。

可以直接在 CSS 中做我想做的事吗？如果可以，可以指导一下吗？

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

谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

    .modal-body 
{
  overflow-y:scroll;
  height:400px;
}

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

【讨论】：

这不是解决办法，内容不适合屏幕的高度。目标不是在面板 3（打开时）和粉红色框架之间有白色。底部必须是灰色的。
好吧，如果您打算在模态中制作购物车，则无需将 Fixed position 应用于页脚。参考这个：phpexpertfoodordering.in/webslogix/html/menu.html