Footer won't center on the bottom of the page

问题

My footer is perfectly positioned on every computer screen. But, when I test it on an Iphone, the footer get stuck in the middle of the page and is not repeating itself in a horizontal way.

What can I do, so the footer also stays on the bottom of an Iphone screen and other smartphones?

This is the CSS of my footer:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:270px;
    background-image:url(images/footer.png);   
    }

回答1:

Change the position to fixed, hope that can solve this question.

#footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:270px;
    background-image:url(images/footer.png);
}

回答2:

First, I hope it's for a static page, as dynamic pages could give you even more troubles.

Anyway, it's not a good idea to put the footer at 0 to the bottom, if I had bigger fonts or small resolution (like using a notebook or a smartphone), the content will go below the footer, which is what probably happens to your page. There is a lot of code around the web answering that specific question. And it's called 'sticky footer'.

This is a copy/paste of that page. I hope no one get's offended, there's no need to rewrite it all if it's already out there. If you are not satisfied, just google 'Sticky footer':

How to use the CSS Sticky Footer on your website

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

* {
    margin: 0;
    }
html, body {
    height: 100%;
    }
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
.footer, .push {
    height: 4em;
    }

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

EDIT: It has exactly the behavior I stated. If you zoom your page (Control + '+'), you'll see how the content goes below the footer.

来源：https://stackoverflow.com/questions/10174996/footer-wont-center-on-the-bottom-of-the-page

标签

iphone

html

css

footer