如何让一个 div 停留在另一个滚动的 div 的底部答案

【问题标题】：How to make a div stay at the bottom of another div that scrolls如何让一个 div 停留在另一个滚动的 div 的底部
【发布时间】：2012-01-21 09:03:34
【问题描述】：

我有一个 400 像素高的 div，它的内容可以在里面滚动。我有另一个 div 里面有一个图像，这个 div 使用 position:absolute; 位于这个父 div 的底部；底部：0；但是当我滚动它时，它会随着内容向上移动父 div。

每次用户滚动父 div 时，我使用 jQuery 将 div 的位置更改为底部，这有效，但每次 div 滚动时都会跳转。

有没有办法通过平滑滚动来做到这一点？我希望它只是坐在父 div 的底部而不移动。

谢谢

【问题讨论】：

标签： jquery css html scroll

【解决方案1】：

您可以将带有内容的 div 放在另一个 div 中，并将图像相对于父级定位。如果存在，您将不得不考虑滚动条的高度，但除此之外它应该可以工作。我会尝试为你想出一个 jsfiddle。

http://jsfiddle.net/AwH9S/

您可能想要实现一些 javascript 来确定滚动条的大小以及它是否存在。

【讨论】：

效果很好。我使用 if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { //hide image functiion } 来在滚动到底部时隐藏图像。谢谢

【解决方案2】：

你能分享一些 HTML/CSS 吗？

在你的 CSS 中

#theDiv {
    position: absolute;
    bottom: 0;
}

它的父母给它

position: relative;

【讨论】：

【解决方案3】：

你不能以这种方式做你想做的事。之前关于位置相对和绝对位置的建议将帮助您“初始化”其父 div 底部的 img，但如果“scrollHeight”（如果我错了，请纠正我，不确定我在这里使用了正确的词汇) 更改，也就是用户向下滚动 div，然后绝对定位的 div 将保持这样的绝对位置，从而滚动内容。您不能使用固定定位，因为它会固定在屏幕上，而不是最近的父亲戚。无论您是否愿意，事实是，最简单的方法是设置一个包含 2 个 div 的父级，一个用于您的可滚动内容，一个用于您的图像，并定位 2 以便第二个“出现”附在第一个底部。

【讨论】：