页脚不会在页面底部居中答案

【问题标题】：Footer won't center on the bottom of the page页脚不会在页面底部居中
【发布时间】：2012-04-27 20:01:27
【问题描述】：

我的页脚完美地定位在每个计算机屏幕上。但是，当我在 Iphone 上对其进行测试时，页脚卡在页面中间并且不会以水平方式重复。

我该怎么办，让页脚也停留在 iPhone 屏幕和其他智能手机的底部？

这是我页脚的 CSS：

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

【问题讨论】：

您能提供一个示例页面吗？
这是网站：protoformat.nl/site/index.html

标签： iphone html css footer

【解决方案1】：

首先，我希望它是针对静态页面的，因为动态页面会给您带来更多麻烦。

无论如何，将页脚置于 0 到底部并不是一个好主意，如果我有更大的字体或较小的分辨率（例如使用笔记本或智能手机），内容将位于页脚下方，这可能是发生在您的页面上。网络上有很多代码回答了这个特定的问题。它被称为'sticky footer'。

这是该页面的副本/粘贴。我希望没有人被冒犯，如果它已经存在，就没有必要重写它。如果您不满意，只需 google 'Sticky footer'：

如何在您的网站上使用 CSS Sticky Footer

将以下几行 CSS 添加到您的样式表中。 .wrapper 中边距的负值与 .footer 和 .push 的高度相同。负边距应始终等于页脚的整个高度（包括您可能添加的任何填充或边框）。

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

遵循这个 HTML 结构。任何内容都不能位于 .wrapper 和 .footer div 标签之外，除非它是绝对使用 CSS 定位的。 .push div 中也不应该有任何内容，因为它是一个隐藏元素，可以“下推”页脚，因此它不会与任何内容重叠。

<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>

编辑：它完全符合我所说的行为。如果您缩放页面（Control + '+'），您将看到内容如何位于页脚下方。

【讨论】：

感谢您的帮助。我已经尝试了一个粘性页脚代码。没有运气，我通过将页脚放入正文解决了我的问题。也许不是一个真正好的解决方案，但对我来说，它有效。

【解决方案2】：

将位置改为固定，希望能解决这个问题。

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

【讨论】：