Footer will not extend to 100% width on iphone, why?

问题

Im nearly finished with this website but for one problem. On iphones (and possibly other mobile devices) the footer is cut off short at the bottom to the right, leaving a white space, even though i've set the footer to min-width:100%. I'm unsure what is causing this and would appreciate any help on this. You can visit the website here

I've broke down the HTML below to the essentials.

<body>

<div class="content">

    <header>
        <img /> 
    </header>

    <img />
    <h3>Title</h3><br>
    <p>
        Paragraph
    </p>
    <div class="push"></div>

</div>

<div id="footer">
    <a href="page.html">
        <img />
    </a>
    <ul>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
    </ul>
        <p>copyright text<a href="page.html">link</a></p>
</div>

</body>

And the CSS

body{
text-align: center;
padding-top: 40px;
color: #333;
margin: 0px;
width: 100%;
    min-width: 980px;
}

.content{
width:1080px;
margin: Auto;
}

#footer {
background-color: #000;
float: left;
height:250px;
min-width:100%;
margin-top:70px;
padding-top:45px;
}

#footer ul{
list-style:none;
padding: 0px;
margin-top:30px;
}

Thank you!

Edit:

Ok, i've followed the suggestions of adding a viewport meta tag to the website. However it's made it even more confusing for me. Instead of the website displaying scaled to the screen, its now displaying way too zoomed in and the footer is now a small square whimpering in the lower left corner. I've added the viewport meta tag like this

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

You can see this live here Am I writing the viewport meta wrong somehow? wrong values?

Edit2: I'd also like to point out that the body is extending to the full width of the viewport, you can see that here: http://gloryillustration.com/tests/test9.html Where i made the background colour of the body grey, so you can see that it's just the footer that is misbehaving! I would believe that body tags and div tags would behave the same in this respect but they don't?

回答1:

Use viewport meta tag to make your website support in mobile browsers.

Here is a great description about this:

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag/

& here is a great disscussion about this on github (must read the fifth comment):

https://github.com/h5bp/html5-boilerplate/issues/1099

回答2:

I'm not sure about how far it is correct, however I gave this meta line on my site and I solved the issue:

<meta name="viewport" content="width=320, initial-scale=0.29">

The width is the size of the iPhone (horizontal). the initial-scale is the ratio between the real size (1100px) and the size of the iPhone (320px)

来源：https://stackoverflow.com/questions/11439954/footer-will-not-extend-to-100-width-on-iphone-why

标签

iphone

html

css

mobile-safari

responsive-design