带有 Bootstrap 3 和粘性页脚的同位素答案

【问题标题】：Isotope with Bootstrap 3 and Sticky Footer带有 Bootstrap 3 和粘性页脚的同位素
【发布时间】：2023-03-09 22:16:02
【问题描述】：

我正在使用 Isotope 在 Bootstrap 3 框架中呈现图像网格。我有一个粘性页脚（使用推荐的绝对定位，底部设置为 0）。

当浏览器窗口的高度降低时，包含同位素 d 图像的 div 不会在粘性页脚开始处停止 - 因此 div 最底部的 60 像素（实际数量取决于为页脚设置的高度）是被页脚隐藏或延伸到页脚下方。差异取决于我是否为容器 div 设置了高度。

the codepen contains an example

我猜这个问题是由于 Isotope 定位的所有图像都是绝对定位的。关于如何正确使用它的任何建议？

谢谢

【问题讨论】：

【解决方案1】：

尝试将您的页脚从position: absolute; 更改为position: fixed;，并将padding-bottom: 75px; 添加到您的<body>。

请记住，当您定位 absolute 或 fixed 时，该元素将从文档的常规流中删除。当您定位它时，它很可能会与另一个静态定位的元素发生冲突。

在这种情况下，向正文添加填充“模拟”常规文档中页脚实际占用的空间。

附加说明：粘性页脚方法通常意味着您需要为页脚设置固定高度。我使用了 75px 作为 body 的 padding，但你可以调整它以获得最佳效果。

【讨论】：