1

我正在尝试创建一个底部对齐、流体宽度的粘性页脚，其中包含三个与容器高度相同的链接，它们也具有流体宽度。

我创建了此页脚的顶部对齐版本，其中链接不是其容器的完整高度。如果我将容器的底部设置为零，它会中断。我把代码放在这里：http: //jsfiddle.net/bHJR3/1/

如何修改我拥有的内容，使容器的底部边缘与窗口的底部齐平，并且链接与容器的高度相同？

我知道如何通过 jquery 做到这一点，但如果可能的话，我会尽量避免使用 js。

谢谢你的帮助。

编辑：这是我想出的一个 jquery 解决方案，以防万一有人想看到它。http://jsfiddle.net/bHJR3/2/

4

1 回答 1

2

上手时它坏了的原因bottom: 0是#footer因为里面的东西#footer都有position: absolute。绝对定位元素不会占用文档流中的任何空间，并且不会导致其父元素扩展以包含它们。设置一个高度#footer解决了这个问题。height: 100%标签上的设置a将导致它们相对于其父元素调整大小。你可以保留div.content，但你也必须设置height: 100%它。

将以下 CSS 添加到#footer：

bottom: 0;
height: 90px;

将以下 CSS 添加到A：

height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */

删除div.content. 这里似乎没有必要。

编辑

您可以通过在以下位置添加/更改以下 CSS 来使页脚居中#footer：

width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */

编辑

如果窗口宽度小于 640 像素，您可以使用 max-width 和媒体查询来更改页脚的样式：

#footer {
    position: fixed;
    width: 100%;
    max-width: 640px;
    height: 114px;
    bottom:0;
    left: 50%;
    margin-left: -320px;
}

@media only screen and (max-width: 640px) {
    #footer {
        margin-left: auto;
        left: 0;
    }
}
于 2012-05-21T21:15:11.380 回答