当前位置：文江博客话题详情

页脚位置 - 底部和中心

发布于 2024-10-31 05:42:08 字数 313 浏览 3 评论 0原文

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

问题：

我无法使用 postiton:fixed - 页脚未居中
页面内容是从数据库动态加载的，因此我无法知道确切的高度
如果浏览器窗口非常小，页脚会碰到内容并涵盖它。 z-index 很难解决这个问题，因为我在背景上设置了一个渐变，就像身体背景一样。

所以我需要像 float:bottom 这样的东西......

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风渺 2024-11-07 05:42:08

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

试试这个：

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

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

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

Although the other answers do work, you should avoid using negative margins.

Try this:

.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;
}

And the HTML would be:

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

---------- Edit ------------

You should also ammend your over all page size, as to take into consideration the height of your footer - otherwise you will never see the bottom content

回复收藏 0 原文

圈圈圆圆圈圈 2024-11-07 05:42:08

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

检查工作示例 http://jsfiddle.net/qdVbR/

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