底部的页脚

Question

我放弃了......我只是放弃了。在建了3-4个站点之后（是的还是业余爱好者），我还在处理将页脚保持在底部的问题。这是我的js小提琴http://jsfiddle.net/kY8hY/

页脚很好，直到我开始构建身体然后，当我输入内容的某些值，文本的墙，页脚出现了。我在这里撕开我的头发。

这是另一个我可以将页脚保持在底部的jsfiddle。 http://jsfiddle.net/2J2TH/

你会注意到我拿出了一个完整的div（anasayfaicerik）并用另一个div（deneme）替换它，并使用完全相同的值。

<div id="shakingmygoddamnhead>yup</div> stack forces me to do this.

什么是冲突？ ＆＃34; anasayfaicerik＆＃34;的价值正在与＆＃34;页脚＆＃34;

发生冲突

我试着逐一删除所有内容，看看问题是否会消失，但没有人。它除非我删除整个＆＃34; anasayfaicerik＆＃34;格

Answer 1

问题在于CSS应用于#anasayfaicerik元素。

由于其内容已浮动，您需要扩展容器以适合其内容。

添加overflow:hidden会修复它。

http://jsfiddle.net/kY8hY/4/

演示

Answer 2

问题是#adadil内的内容是浮动的，因此#adadil忽略了它们的大小。

您需要clearfix强制容器实际包含浮动内容。

例如bootstrap's clearfix如下所示：

  .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }

然后您只需将clearfix类添加到#adadil div。 （不需要额外的html）

Working example

Answer 3

检查http://jsfiddle.net/shubhambhave/F8Hf7/2/

我刚设置

#footer {
position: relative;
display: inline-block;
}