Abap newbie Abap newbie - 6 months ago 9
CSS Question

using css overflow causes a strange behavior

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.

http://i.imgur.com/EtQDp.png

Answer

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.