html - 防止在固定位置元素后面滚动

Question

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

我的问题在这里: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>

Answer 1

这是您需要做的事情，但是您需要编写 CSS，如果您单独编写 CSS 而不是将样式属性赋予 div 会更好。

In order to fix your problem we need to set overflow to be hidden Learn more about these properties 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>