Question

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

我该怎么做，所以页脚还会停留在Iphone屏幕和其他智能手机的底部？

这是我的页脚的CSS：

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

Answer 1

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

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

Answer 2

首先，我希望它是一个静态页面，因为动态页面可能会给你带来更多麻烦。

无论如何，如果我有更大的字体或更小的分辨率（如使用笔记本电脑或智能手机），将页脚置于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 个答案:

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