将 Foundation 页脚粘贴到页面底部

Question

我是基础框架的新手，无论 window 大小如何，我都无法将页脚固定在页面底部。我用过页脚 class？我究竟做错了什么？有什么建议吗？

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，它会重新计算防弹页脚的屏幕尺寸

将 Foundation 页脚粘贴到页面底部

Sticking Foundation footer to the bottom of page

css

ruby-on-rails

zurb-foundation

frontend