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'部分中的浮动div。页脚需要清除代码中浮动的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>

如果您有任何问题，请与我们联系。