prevent scrolling behind a fixed position element

Question

I have a footer fixed at the bottom of my page with a set height. Is it possible to scroll the content of my page such that it ends at the top of the fixed footer?

A fiddle of my issue here: fiddle

The last 250px (the footer height) of non-fixed elements scroll behind the footer and aren't seen when the scrollbar hits the bottom of the page.

<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

This is something you will need to do, however you need to write CSS and would be good if you write CSS separately instead of giving style properties to 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>

Answer 2

Add a margin-bottom of 250px on the last DIV

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