Sticking Foundation нижний колонтитул в нижней части страницы

Question

Я новичок в фундаментном фундаменте, и у меня возникают проблемы с тем, что мой нижний колонтитул остается неподвижным в нижней части страницы, независимо от размера окна. Я использовал класс нижнего колонтитула? Что я делаю не так? Какие-либо предложения?

HTML:

.wrapper 
    .row.footer 
    .small-12.columns.small-centered 
     %ul.inline-list 
     %li 
      = link_to "GitHub", "http://www.github.com/XXXX" 
     %li 
      %span x 
     %li 
      = link_to "LinkedIn", "http://www.linkedin.com/in/XXXX" 
     %li 
      %span x 
     %li 
      = link_to "Facebook", "http://www.facebook.com/XXXX" 
     %li 
      %span x 
     %li 
      = link_to "Instagram", "http://www.instagram.com/XXXX" 

CSS:

.footer { 
    width: 100%; 
    margin: 0 auto; 
    clear: both; /*Why does this work?*/ 

    ul { 
    display: inline-block; 
    line-height: 100px; 
    } 

    .inline-list { 
    height: 75px; 
    } 
} 

application.css:

*, html { 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-size: 100%; 
    text-align: center; 
} 

body { 
    background-color: #FFFFFF; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

Answer 1

Простой ответ: Вы можете использовать этот CSS

.footer{position:fixed; bottom:0; z-index:100000} 

, но в зависимости от вашего содержимого он может добавить некоторые дополнительные проблемы при просмотре на разных устройствах, поэтому я также рекомендую проверить https://github.com/coreysyms/foundationStickyFooter, который выполняет перерасчет размера экрана для столбца с защитой от пули