Question

我正在页面底部写一个固定页脚的网页。页面的内容具有特定的宽度并居中。页脚也有特定的宽度，必须居中。

的问题：

我无法使用postiton: fixed - 页脚不居中
页面内容是从数据库动态加载的，所以我无法知道确切的高度
如果浏览器窗口非常小，页脚会点击内容并覆盖它。 z-index几乎没有修复它，因为我在背景设置上有一个渐变，就像身体背景一样。

所以我需要像float: bottom ....

Answer 1

虽然其他答案确实有效，但您应该避免使用负边距。

试试这个：

.footerholder {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 100%;
}

.footer {
    background: none repeat scroll 0 0 blue;
    height: 100px;
    margin: auto;
    width: 400px;
}

HTML将是：

<div class="footerholder">
    <div class="footer">
    ....
    </div>
</div>

----------编辑------------

您还应该修改所有页面大小，以考虑页脚的高度 - 否则您将永远不会看到底部内容

Answer 2

.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
}

检查http://jsfiddle.net/qdVbR/

处的工作示例

Answer 3

看一下本教程。我相信这可能就是你要找的东西。页脚是固定的，并考虑其上方div的高度（不重叠）一旦您访问此页面，请调整窗口大小以查看我在说什么。

http://ryanfait.com/sticky-footer/

页脚位置 - 底部和中心

3 个答案:

检查http://jsfiddle.net/qdVbR/