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

将基础页脚粘贴到页面底部

1 个答案: