2

我正在尝试将页脚放在页面的右下角。我正在使用 HTML5 的<footer>标签。

所以,这是我的 CSS 中的内容:

footer {
    position:absolute;
    bottom: 0px;
    float: right;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
}

使用此代码,页脚完美地贴在底部。我想要的是它也应该在页脚的最右边。

http://i47.tinypic.com/2rrox0w.png

因此,当我使用以下代码时:right: 50px在 CSS 中。然后页脚相对于浏览器定位。所以,每当我调整浏览器的大小时,页脚就会错位。

我想要的是 ?

我想将页脚放在底部。并且在距离容器(#main 或 #maincontent) 50px(右)的边距处,它被放置在而不是浏览器中。float: right似乎不起作用。

我也看过整个互联网和stackoverflow。但是,找不到此类问题的解决方案。

我正在使用 Google Chrome 22。因此,我的浏览器在很大程度上与 HTML5 兼容。

4

4 回答 4

2

更新:你不需要绝对定位,只需删除位置,给你的页脚一些宽度,然后像这样向右浮动

footer {
    float: right;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
    width: 180px;
}

我的新小提琴

于 2012-10-01T18:13:24.437 回答
0

添加position: relative到容器中,然后使用该right属性。

所以你的完整 CSS 看起来像这样:

#main,
#maincontent {
    position: relative;
}

footer {
    position: absolute;
    bottom: 0px;
    right: 50px;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
}
于 2012-10-01T18:11:46.403 回答
0

删除float并赋予right:50px(或您想要的值)它。如果它仍然不起作用,请给出clear:both;并检查您的paddingmargin

于 2012-10-01T18:12:09.447 回答
0

您需要为页脚创建一个与#main 或#maincontent 相同的集中式容器。然后使用该页脚容器内的边距。

于 2012-10-01T18:20:45.417 回答