防止滚动到固定位置元素后面

Question

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

我这里的小提琴 ： 小提琴

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

<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

在最后一个DIV上添加250px的空白边距

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

Answer 2

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

为了解决您的问题，我们需要将溢出设置为隐藏， 在此处了解有关这些属性的更多信息。

 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>