Hello!

In the page layout, the footer is pressed to the bottom of the screen:

div.footer { width: 100%; height: 30px; position: fixed; bottom: 0; }

There is a lot of content on the page and, due to the footer’s fixed property, now some of the content is not visible, because she is "below" footer. How to indent a block with content from the bottom of the screen so that it does not climb over the footer?

Thank.

Here is an example - http://jsfiddle.net/DYMWy/

1 answer 1

Two ways, both on html5

first using pseudo-element: before

 div.footer:before { position: absolute; top: -10px; width: 100%; height: 10px; background: white; display: block; content: '\0000a0'; opacity: 0.7; }

http://jsfiddle.net/oceog/DYMWy/4/

second, using fixed and bottom:

 div.content { width: 100%; margin-bottom: 20px; position: fixed; top: 5px; bottom: 15px; overflow-y: scroll; }

http://jsfiddle.net/oceog/DYMWy/5/