HTML CSS 页脚答案

【问题标题】：HTML CSS footerHTML CSS 页脚
【发布时间】：2012-08-23 11:48:15
【问题描述】：

如何将页脚推到页面底部？这是我目前拥有的一个示例：hansmoolman.com 如您所见，页脚被推到我的 2 个左右容器下方。我怎样才能解决这个问题。我对某些元素使用了相对定位，因为必须将红色横幅推到标题栏上并给出 + z-index。我在网上找到了一些将页脚粘贴到底部的解决方案，但这并不能解决我的问题，因为如果其中的内容不足以填满整个页面，页脚仍然会出现在我的 2 列中。

所以我想要的是让页脚始终跟随在所有其余内容的下方（我可以稍后解决粘在底部的问题）。

CSS代码有点多，这里没有加，有需要的可以加

【问题讨论】：

ryanfait.com/sticky-footer
如果问题是关于 html 和 CSS 的，通常将其添加到问题中是有益的。
你用谷歌搜索了吗？有这么多可用的解决方案。
@Hans Moolman：请参阅下面的可能解决方案我的答案。谢谢！
这为我解决了stackoverflow.com/questions/14206281/…

标签： html css footer

【解决方案1】：

你的 CSS 看起来像：

#footer {
    background-color: #FFFEF0;
    border: 1px solid #000000;
    clear: both;
    height: auto;
    margin-top: -100px; /* >> Remove This*/
    overflow: hidden;
    position: relative;
    top: -200px; /* >> Remove This*/
    width: 100%;
    z-index: -1;
}

从#footer中删除以下css规则

top: -200px; 
margin-top: -100px;

【讨论】：

负边距一般都是在问问题
是的，就是这样，谢谢。如果你在深夜从一些旧项目中复制和粘贴代码，我想这就是你得到的结果。

【解决方案2】：

尝试 clear:both 为你的页脚容器标签，考虑到它有 display:block;设置

【讨论】：

【解决方案3】：

右对齐内容。您必须对 CSS 进行一些更改。

首先删除：

top: -200px;
width: 100%;
z-index: -1;

来自您的#footer。

并将您的 #mainContentContainer 更改为：

#mainContentContainer
{
    min-height: 400px;
    overflow: auto;
    position: relative;
    width: 100%;
}

【讨论】：