Html 固定位置页脚中的流体宽度块元素链接

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

我已经创建了这个页脚的顶部对齐版本，其中链接不是其容器的完整高度。如果我将容器的底部设置为零，它将断开。我在这里输入了代码：

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

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

谢谢你的帮助

编辑：

---

这里有一个jquery解决方案，如果有人想看它，我会在没有答案的情况下提出

当您在

#footer

上设置

底部：0

时，它破裂的原因是

#footer

中的所有内容都具有

位置：绝对

。绝对定位元素不会占用文档流中的任何空间，也不会导致其父元素展开以包含它们。在

#页脚上设置高度可以解决此问题。在
a
标记上设置
height:100%
将使它们相对于其父元素调整大小。您可以保留
div.content
，但还必须在其上设置
高度：100%

将以下CSS添加到
#页脚中
：

bottom: 0;
height: 90px;

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

将以下CSS添加到
A
：

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

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

编辑

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

bottom: 0;
height: 90px;

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

编辑

如果窗口宽度小于640px，则可以使用“最大宽度”和“媒体查询”来更改页脚的样式：

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

@ryan谢谢，但是
页边距顶部：81%
基于像素的高度？不完全正确。更新了它，我想我已经做了，它现在正在使用底部。啊！好多了！吹毛求疵的旁注：在多个元素上设置
height:114px
是个坏主意-最好在子元素上使用
height:100%
，这样您只需担心更改顶层父元素的高度。但是，在这种情况下，
div.content
是完全没有必要的。我在没有content div的情况下很难保持页脚居中，也许我有问题。我看到这个解决方案的唯一问题是，无论窗口大小如何，我都试图保持高度/宽度比不变。我很抱歉没有在我的问题中说明这一点，这是我发布的问题的答案。@tuck页脚的宽度应该是多少？