页脚位置 - 底部和中心

Question

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

问题:

1. 我无法使用postiton: fixed- 页脚不居中
2. 页面内容是从数据库动态加载的,所以我无法知道确切的高度
3. 如果浏览器窗口非常小,则页脚会点击内容并覆盖它.A 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/上的工作示例