带有“bottom:0”CSS 属性的页脚

Question

I have difficulties sticking a footer at the end of each pages without showing a bottom margin on very big resolutions (2560x1440 for instance).

When used as "position:absolute" element it works fine on small heights pages such as http://www.perfect-profile.fr/mesdames Unfortunately, when on big heights pages, the footer will stays in the middle of the page : http://www.perfect-profile.fr/prix

I tried "position:relative" and that's the opposite : it show at the end of the content on big heights pages and keeps a margin in the bottom on small heights pages. I could determine a section min-height but the result would be hasardous on big resolutions.

Do you have any clue what I could do ? Thanks

Answer 1

You need to use:

position:fixed

and your footer will stay at the bottom of the viewport...

Answer 2

Well, as it seemed trickier than expected I had no other choice than to rethink the display.

I used a "position:fixed" and "bottom:0" footer to put it at the very bottom of the viewport no matter how much content the pages have. Not what the client expected but that does the trick.

Thanks everyone for trying to help me on this one. Problem solved.

Answer 3

<style>
footer
{
position:absolute;
bottom:0;
width:100%;
}
</style>

you have to set footer position fixed or absolute