HTML 页脚不在底部

Question

我正在向我的页面添加一个页脚，但它没有到达我想要的页面底部。我知道已经发布了很多关于此的问题，但我已经解决了非常多的问题，但没有任何效果。

这是我的 html:http://pastebin.com/qXA9PBeq这是我的 CSS:http://pastebin.com/hHiGAKck

如果有人需要，这里是当前网站的链接:http://thegeekcircle.com/这是整个网站:https://www.dropbox.com/s/jv8hoxhmvws7u4s/site.zip?dl=0

为什么页脚不在页面底部？我该如何解决？

谢谢!

Answer 1

问题是“.mainBody”部分中的 float div。页脚需要清除您在代码中 float 的 div。解决此问题的最佳方法是使用我们称为“clearfix hack”的方法。这是您的设置方式

CSS

  //Add this to your CSS
 .clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
 }

HTML

       // Add clearfix class to this div
      <div class="mainBody clearfix">
        <div class="leftBodyText">
            <p>
                   // big block of code
            </p>
        </div>
        <div class="rightBodyVideo">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <div id="footer">
        <p>
            &copy The Geek Circle 2015
        </p>
    </div>

如果您有任何问题，请告诉我。