html - 固定位置页脚中的流体宽度 block 元素链接

Question

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

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

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

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

感谢您的帮助。

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

Answer 1

当你在 #footer 上设置 bottom: 0 时它崩溃的原因是因为 #footer 中的所有内容都有 position: absolute 。绝对定位的元素不会占用文档流中的任何空间，也不会导致其父元素扩展以包含它们。在 #footer 上设置高度可以解决这个问题。在 a 标签上设置 height: 100% 将导致它们相对于其父元素调整大小。您可以保留 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 */

编辑

如果窗口宽度小于 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;
    }
}