带 Bootstrap 3 和粘性页脚的同位素
Isotope with Bootstrap 3 and Sticky Footer
我正在使用 Isotope 在 Bootstrap 3 框架内呈现图像网格。
我有一个粘性页脚（使用推荐的绝对定位，底部设置为 0）。
当浏览器 window 的高度降低时，包含同位素 d 图像的 div 不会停在粘性页脚开始的位置 - 因此 [= 最底部的 60px 25=]（实际数量取决于为页脚设置的高度）被页脚隐藏或延伸到页脚下方。差异取决于我是否为容器设置高度 divs.
这是来自 https://codepen.io/marklsanders/pen/KrRVaK 的 html：
the codepen contains an example
我猜问题是因为Isotope定位的所有图像都是绝对定位的。
关于如何正确使用它有什么建议吗？
谢谢
尝试将页脚从 position: absolute; 更改为 position: fixed;，然后将 padding-bottom: 75px; 添加到 <body>。
请记住，当您定位绝对或固定时，该元素将从文档的常规流中删除。当您定位它时，它很可能会与另一个静态定位的元素发生冲突。
在这种情况下，在常规文档的正文中添加填充'simulates' space 实际被页脚占用。
附加说明：粘性页脚方法通常意味着您需要为页脚设置固定高度。我使用 75px 作为正文的内边距，但您可以 fiddle 使用此值以获得最佳效果。
我正在使用 Isotope 在 Bootstrap 3 框架内呈现图像网格。 我有一个粘性页脚（使用推荐的绝对定位，底部设置为 0）。
当浏览器 window 的高度降低时，包含同位素 d 图像的 div 不会停在粘性页脚开始的位置 - 因此 [= 最底部的 60px 25=]（实际数量取决于为页脚设置的高度）被页脚隐藏或延伸到页脚下方。差异取决于我是否为容器设置高度 divs.
这是来自 https://codepen.io/marklsanders/pen/KrRVaK 的 html：
the codepen contains an example
我猜问题是因为Isotope定位的所有图像都是绝对定位的。 关于如何正确使用它有什么建议吗？
谢谢
尝试将页脚从 position: absolute; 更改为 position: fixed;，然后将 padding-bottom: 75px; 添加到 <body>。
请记住，当您定位绝对或固定时，该元素将从文档的常规流中删除。当您定位它时，它很可能会与另一个静态定位的元素发生冲突。
在这种情况下，在常规文档的正文中添加填充'simulates' space 实际被页脚占用。
附加说明：粘性页脚方法通常意味着您需要为页脚设置固定高度。我使用 75px 作为正文的内边距，但您可以 fiddle 使用此值以获得最佳效果。