将页脚拖动到页面底部，twitter自举 [英] Flushing footer to bottom of the page, twitter bootstrap

问题描述

我通常熟悉使用css和这种方式刷新页脚的技术方法。

I am generally familiar with the technique of flushing a footer using css and this following approach.

但是我有一些麻烦让这种方法工作在Twitter引导，很可能是因为Twitter引导在本质上是响应的事实。使用Twitter的引导我不能使用上面的博文中描述的方法来获取页脚冲刷到页面底部。

But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.

推荐答案

找到片段这里对引导非常有用

Found the snippets here works really well for bootstrap

Html ：

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

资料来源：演示和教程

这篇关于将页脚拖动到页面底部，twitter自举的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！