将页脚刷新到页面底部，twitter bootstrap [英] Flushing footer to bottom of the page, twitter bootstrap

问题描述

我通常熟悉使用 css 刷新页脚的技术.

但是我在将这种方法用于 Twitter 引导程序时遇到了一些麻烦，很可能是因为 Twitter 引导程序本质上是响应式的.使用 Twitter 引导程序，我无法使用上述博客文章中描述的方法将页脚刷新到页面底部.

解决方案

找到片段here 效果很好用于引导

HTML:

<div id="main" class="container clear-top"><p>您在此处的内容</p>

<footer class="footer"></footer>

CSS:

html, body {高度:100%；}#裹 {最小高度:100%；}#主要的 {溢出:自动；填充底部:150px;/* 这需要大于页脚高度 */}.页脚{位置:相对；边距顶部:-150px；/*页脚高度的负值*/高度:150px；清除:两者；填充顶部:20px;}

I am generally familiar with the technique of flushing a footer using css.

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 bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！