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

Проблема заключается в ваших плавающих divs в разделе «.mainBody». Нижний колонтитул должен очистить divs, которые вы разместили в своем коде. Лучший способ исправить это - это то, что мы назвали «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> 

Позвольте мне знать, если у вас есть какие-либо вопросы.