防止在固定位置元素后面滚动答案

【问题标题】：prevent scrolling behind a fixed position element防止在固定位置元素后面滚动
【发布时间】：2017-10-12 15:09:47
【问题描述】：

我在页面底部有一个固定高度的页脚。是否可以滚动我的页面内容，使其在固定页脚的顶部结束？

在这里解决我的问题：fiddle

非固定元素的最后 250 像素（页脚高度）在页脚后面滚动，并且在滚动条到达页面底部时不可见。

<div style="height: 500px; width: 50%; background-color: yellow;"></div>
<div style="height: 500px; width: 50%; background-color: blue;"></div>
<div style="height: 500px; width: 50%; background-color: green;"></div>

<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;">
  Fixed Footer
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这是您需要做的事情，但是您需要编写 CSS，如果您单独编写 CSS 而不是为 div 提供样式属性会很好。

为了解决您的问题，我们需要将溢出设置为隐藏详细了解这些属性here.

body,
html{
    overflow: hidden;
    margin: 0;
    padding: 0;
    }

<div style="height: 500px; width: 50%; background-color: yellow;"></div>
<div style="height: 500px; width: 50%; background-color: blue;"></div>
<div style="height: 500px; width: 50%; background-color: green;"></div>

<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;">
  Fixed Footer
</div>

【讨论】：

【解决方案2】：

在最后一个 DIV 上添加 250px 的 margin-bottom

<div style="height: 500px; width: 50%; background-color: green; margin-bottom:250px;">
</div>

【讨论】：