Css 如何相对于页面底部定位页脚/元素？

我试图将我的页脚放在页面底部，但几乎没有成功

我只能粘贴链接，因为那里有很多CSS，我不确定我的问题出在哪里

这就是链接：；如果有人愿意帮助我，我将不胜感激

编辑：问题已过时，url已不存在，但当个人需要在页面底部放置页脚（或任何其他元素）（即所谓的粘性页脚）时，答案可能仍然有效。

尝试添加

.footerClass {
     position:absolute;
     bottom:0;
}

添加到css文件中，并将类footerClass添加到页脚标记中

#footer {
      margin-top: -50px;
}

将其从#页脚{}定义中删除。另外，因为您希望它是相对的，所以必须增加页脚上方div的高度，直到它到达屏幕的末尾。否则，您将不得不使用绝对定位

编辑：同时从#页脚中删除“位置：相对”

编辑2：发布我在firebug上看到的所有定义

footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    clear: both;
    height: 50px;
    position: relative;
    width: 100%;
}

footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

footer {
    display: block;
}

您可以使用“显示：块”删除第一组定义和最后一组定义。如果你能在某处找到它们。

使用css表格：

-内容很少

-内容少+页脚大

-大量内容

加成 我最近真的用过这个方法。它工作得很好。如果页脚中有动态内容，则可以轻松制作脚本，在调整大小或方向时更改页脚的高度和正文的边距

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px; //same height as the margin to the bottom of the body
}

---

脚本：，Firefox崩溃了，要求我停止上面提到的脚本。有一个后备方法，本地加载。几分钟后再试，我的服务器可能会出现问题，因为我刚刚上传了文件。这是一个很好的例子，说明了为什么所有相关信息都应该包含在问题中，而不是被链接引用。是的，答案可能有用，但问题很模糊。如果你编辑问题使其更有意义，我会给你重新投票。是的，我现在正在使用它，但我想将其定位为相对位置，因为内容将是响应性的，并且可能会出现垂直溢出。因此，你希望页脚保持在可能溢出页脚下的内容的“上方”，所以页脚总是可见的？我可以使用

z-index

，使其保持在内容上方，我想要的是内容向下推动页脚，内容始终保持100%高，这样无论内容中有什么，它都会推动页脚在页面底部。好的，我仍然会使用绝对定位，但我也会将内容定位在底部上方50px的位置，以及顶部所需的任何空间（位置：绝对；底部：50px；顶部：50px；）嗯，我已经在本地主机上这样做了。似乎没有办法，我只能使用绝对定位。同样的，我不认为这是因为that@Roland，同时从#页脚中删除“位置：相对”。我说了这两个变化，页脚就往下掉了。[使用firebug测试]我不明白为什么要删除

位置：relative将修复它：）只需看看这篇文章：。或者，如果无法跟踪，可以添加“位置：绝对！重要；”。顺便说一句，你所有的元素都有两种不同的定义，你最好先检查并修复，然后再修复其他东西。@Kermani你能不能在需要的地方发布一个新问题或提供一个指向当前页面的链接。非常感谢，请解释我的问题是什么？对不起，但你回答的悬赏问题与原来的完全不同。不幸的是，我们无法在不同的问题之间转换答案，我也不想剥夺你为之工作的奖金。我会让你决定是否保留悬赏的答案，或者是否删除你的答案。另请参阅我刚才给的评论。请注意，你的问题被其他人劫持，变成了一个完全不同的问题。我后来扭转了这一变化，因为这不是出于善意。您可能想澄清您的答案是否也适用于原始问题。@BoltClock~我注意到了这一点，但我无法理解他/她是如何做到这一点的，我也无法回过头来或否认他/她的更改。谢谢你这么做：）
html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px; //same height as the margin to the bottom of the body
}