Я пытаюсь вставить свой нижний колонтитул в нижней части страницы в css

Question

Я использую базу zurbs для создания своего сайта, и я пытаюсь понять, как создать нижний колонтитул, который придерживается нижней части страницы. Я пробовал абсолютное позиционирование, но он перекрывает содержимое. Нижний нижний колонтитул, который я пытаюсь разместить внизу, находится внутри контейнера, однако я мог бы перемещать его там, где это необходимо. Вы можете просматривать сайт живой here

HTML код

<div class="container"> 
    <div class="row"> 
     <div id="logo" class="two columns"> 
      <a href="http://anderskitson.ca/mrskitson2012"><img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/logo.png" alt="Mrs Kitson's Kinderegarten"/></a> 
     </div> 
     <div id="title" class="ten columns"> 
     <p><span>Mr's</span> Kitson's Kindergarten</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="ten columns"> 
      <div class="mainNav"><ul><li class="page_item page-item-19"><a href="http://anderskitson.ca/mrskitson2012/blog/">blog</a></li><li class="page_item page-item-17"><a href="http://anderskitson.ca/mrskitson2012/calendar/">calendar</a></li><li class="page_item page-item-9"><a href="http://anderskitson.ca/mrskitson2012/curriculum/">curriculum</a></li><li class="page_item page-item-15"><a href="http://anderskitson.ca/mrskitson2012/forms/">forms</a></li><li class="page_item page-item-2 current_page_item"><a href="http://anderskitson.ca/mrskitson2012/">home</a></li><li class="page_item page-item-13"><a href="http://anderskitson.ca/mrskitson2012/news/">news</a></li><li class="page_item page-item-11"><a href="http://anderskitson.ca/mrskitson2012/resources/">resources</a></li><li class="page_item page-item-21"><a href="http://anderskitson.ca/mrskitson2012/video/">video</a></li><li class="page_item page-item-7"><a href="http://anderskitson.ca/mrskitson2012/visible/">visible</a></li></ul></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="11 columns offset-by-one"> 
     <img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/> 
     </div> 
    </div> 

    <div id="footer" ></div> 
<!-- container ends--> 
</div> 

код CSS

#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: absolute; bottom:0;} 

Answer 1

Это ваш лучший выбор:

• CSS Sticky Footer Example

Или, я использовал этот широко в моих проектах:

• A CSS Sticky Footer

Повторяющиеся вопросы:

• CSS Sticky Footer
• Problem with CSS Sticky Footer implementation
• Make div stay at bottom of page's content all the time even when there are scrollbars

Answer 2

Вам просто нужно добавить

html { height:100%; } 

у вас есть на вашем теле, но не ваш HTML тегов.

Answer 3

Вы используете фундамент, который изменяет нижнее: 0 абсолютное позиционирование. Доказательство. Попробуйте избавиться от вызова css в заголовке, и увидите, как вы меняете.