流体宽度块元件连接在固定位置的页脚中

Question

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

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

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

我知道如何通过jquery做到这一点，但我尽量避免使用js。

感谢您的帮助。

编辑： 这是一个jquery解决方案，如果有人想看到它，我会想出没有答案的情况。 http://jsfiddle.net/bHJR3/2/

Answer 1

在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。这似乎没有必要。

修改

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

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

修改

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

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