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;并检查您的padding值margin。

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

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

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