CODEWITHSUNDEEP
htmlcss
noclist
noclist

Reputation: 1819

prevent scrolling behind a fixed position element

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>

Upvotes: 4

Views: 6541

Answers (2)

Chetan_Vasudevan
Chetan_Vasudevan

Reputation: 2414

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>

Upvotes: 2

Nawed Khan
Nawed Khan

Reputation: 4401

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

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

Upvotes: 1

Related Questions