Question

I have this website.

I have set a footer with position fixed with a certain height and width of 100% and left:0px and bottom:0px.

The content above the footer gets blocked behind the footer when I resize the browser even though I have overflow:auto on div element above it.

Here is the screen shot when the browser is resized and the content is blocked.

Answer 1

You can fix this by giving your wrapper a bottom margin that is equal to to the height+padding of your footer, so in this case:

#wrapper {
    margin-bottom: 213px;
    overflow: auto;
}

The explanation is that when you position something using position:fixed, you remove it from the flow of the document in the same way as with position:absolute (the difference being that fixed will pin your content to the viewport rather than the document and so will not scroll). That means that normally positioned content is not affected by it, and acts as if it is not there.

In your case, your wrapper div was using all of the available space, which included space that was behind your footer. By adding a margin to the bottom of the wrapper, you are effectively stopping it at the start of the footer, and if more space is required a scrollbar will be displayed.