粘性响应页脚 jekyll-bootstrap答案

【问题标题】：Sticky responsive footer jekyll-bootstrap粘性响应页脚 jekyll-bootstrap
【发布时间】：2013-10-06 02:48:03
【问题描述】：

我正在使用 jekyll-bootstrap 流氓主题，但在将页脚粘贴到 jekyll-bootstrap 时遇到了很多问题。

有没有办法在这个主题中添加页脚？

http://themes.jekyllbootstrap.com/preview/hooligan/

【问题讨论】：

标签： twitter-bootstrap jekyll-bootstrap

【解决方案1】：

要使用粘性页脚，您需要修改默认主题模板并添加一些 css。

_include/theme/主题名/default.html：

...
<body>
  <div class="wrap">
    <!-- navbar and content here! -->
    <div class="footer-push"></div>
  </div>

  <footer>
    <div class="container">
      <!-- footer here! -->
    </div>
  </footer>
</body>
...

Sass 代码：

/* Sticky footer */
$footerHeight: 75px;

//Page full height
html, body {
    height: 100%;
}

#page-wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    // Negative indent footer by it's height
    margin-bottom: -($footerHeight);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

//footer fixed height
.footer-push,
footer {
    height: $footerHeight;
    max-height: $footerHeight;
    overflow: hidden;
}

带有粘性页脚的流氓主题

我已经使用带有粘性页脚的这个主题。

你可以安装它在你的终端运行：

rake theme:install git="https://github.com/Miguelos/hooligan.git"

引导粘滞页脚

Here 你有 twitter bootstrap 的粘性页脚示例。

【讨论】：