我有一个固定位置的元素使其浮动 - 如何防止它到达页脚时浮动？

Question

我希望我的浮动侧边栏在它到达页脚之前停止 - 我到目前为止找到的唯一解决方案是使用javascript，但我更愿意，如果可能的话，还有一种方法可以使用！

一个例子：jsfiddle example

通过添加下面的代码，我可以让它停止，但它然后将我的侧边栏中的所有内容推送到页面上方：

bottom: 500px;

Answer 1

这不是你想要的，因为我想不出任何不涉及任何JS的解决方案

你可以做什么 - 如果你给页脚元素一个位置（相对或绝对），侧边栏会在页面滚动时向下滑动。

 .footer
        {
            width: 100%;
            border: 1px solid green;
            height: 500px;
            background-color: green;
            position:relative;
        }

Answer 2

好的，你的问题是，你并不真正理解HTML容器边界和流。

我会花一些时间查看HTML Flow教程，并了解到底发生了什么，因为它将使您未来的生活变得更加轻松。

另一个技巧是在每个包含结构（如DIV）周围放置边框，以便您可以看到每个对象的嵌套方式等等。

问题是，当您使用并添加bottom：500px;时，您绝对会定位页脚，这会自动将其从正常的HTML流中删除。我猜你的右侧工具栏也不流畅。

因此，您不需要在页脚或右侧工具栏上使用绝对定位，而是需要使用封装整个页面的边界外部容器，然后按照您希望流的顺序将每个元素放在页面上float：left，float：right以获得垂直定位。只要你的页脚是你的边界容器中的最后一个东西，并且所有元素都在流程中，并且页脚的宽度设置为100％，你应该得到你想要的行为。