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

Question

我想把页脚放在页面底部，但一直没有成功。

由于CSS代码很多，我只能提供链接，不确定问题出在哪里。

这是链接：测试；如果有人能帮助我，我会非常感激。

编辑：这个问题很老了，链接也不存在了，但当有人需要将页脚（或其他元素）固定在页面底部时，答案仍然有效。

- Roland

---

脚本：https://raw.github.com/chaoscod3r/less.js/master/dist/less-1.3.0.min.js:9，火狐浏览器崩溃，要求我停止该脚本。 - KBN

有备用方案，可以本地加载。请稍等几分钟，我的服务器可能会出现问题，因为我刚刚上传了文件。 - Roland

这是一个很好的例子，说明为什么所有相关信息都应该包含在问题中，而不是通过链接引用。是的，答案可能有用，但问题非常模糊。如果您编辑问题使其更有意义，我会给您重新开放投票。 - Adi Inbar

Answer 1

最近我使用过这个解决方案。它非常有效。如果您的页脚中有动态内容，您可以轻松编写一个脚本，在调整大小或更改方向时更改页脚的高度和页面边距。

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
}

- Roland

---

请注意，您的问题被其他人劫持并变成了完全不同的问题。我已经撤销了这个更改，因为它不是出于善意。您可能需要澄清您的答案是否也适用于原始问题。 - BoltClock

@BoltClock ~ 我注意到了，但我无法弄清楚他/她是如何做到的，也无法恢复或拒绝他/她的更改。谢谢你做到了这一点 :) - Roland

Answer 2

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

从 #footer {} 定义中删除那个。另外，由于您想要相对的方式，您需要增加 div 在页脚上方的高度，直到它达到屏幕底部。否则，您将不得不使用绝对定位。

编辑：还要从 #footer 中删除 "position: relative"。

编辑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;
}

你可以删除第一个带有"display:block"和最后一个定义集。如果你能在某个地方找到它们。

- KBN

---

我建议你开始使用firebug（火狐浏览器插件）。使用它可以使这些事情更容易发现10倍。[比其他浏览器的开发工具更好] - KBN

我正在使用Chrome浏览器，其中的控制台和Firebug插件。 - Roland

我已经添加了在Firebug上看到的代码，希望你能够追踪它。 - KBN

如果您无法追踪，可以添加“position: absolute !important;”。顺便说一下，您所有的元素都有两个不同的定义，最好先检查并修复它们，然后再修复其他问题。 - KBN

@Kermani，您可以发布一个新问题或提供当前页面的链接，以便我们了解您的需求。 - KBN

Answer 3

使用CSS表格： FIDDLE1 - 少量内容 FIDDLE2 - 少量内容 + 大页脚 FIDDLE3 - 大量内容

标记：

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

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
}

- Danield

---

非常感谢，请解释一下我的问题是什么？ - Mohammad Kermani

抱歉，但您为悬赏回答的问题与原始问题完全不同。不幸的是，我们无法将答案迁移到其他问题上，并且我不想剥夺您为之努力工作的悬赏。我会让您决定是否要保留悬赏答案，或者是否要删除您的答案。 - BoltClock

还请查看我刚刚为原问题提问者留下的评论。 - BoltClock

Answer 4

尝试添加

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

将 class footerClass 添加到您的页脚标签中，然后返回您的 CSS 文件。

- pansarshrek

---

是的，我现在正在使用它，但我想将其相对定位，因为内容将是响应式的，可能会出现垂直溢出。 - Roland

所以您希望页脚保持在内容“上方”，即使内容可能会溢出页脚下面，这样页脚始终可见？ - pansarshrek

我可以通过 z-index 让它停留在内容上方，但我想要的是内容将页脚向下推，并且内容始终具有100％的高度，以便无论内容内部是什么，都将页脚推到页面底部。 - Roland

好的，我仍然会选择绝对定位，但我也会将内容定位到距底部50像素和顶部所需空间（position:absolute;bottom:50px;top:50px;）。 - pansarshrek

好的，我已经在我的本地主机上这样做了。看起来没有其他办法，我只能使用绝对定位。 - Roland