将页脚冲洗至页面底部，Twitter引导程序

本文翻译自：Flushing footer to bottom of the page, twitter bootstrap

I am generally familiar with the technique of flushing a footer using css. 我通常熟悉使用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. 但是我很难在Twitter引导程序中使用这种方法，这很可能是由于Twitter引导程序本质上是响应式的。 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. 使用Twitter引导程序，我无法使用上述博客文章中描述的方法使页脚刷新至页面底部。

---

#1楼

参考：https://stackoom.com/question/GnjU/将页脚冲洗至页面底部-Twitter引导程序

---

#2楼

For Sticky Footer we use two DIV's in the HTML for basic sticky footer effect. 对于粘性页脚，我们在HTML中使用了两个DIV's ，以实现基本的粘性页脚效果。 Write like this: 这样写：

HTML 的HTML

CSS 的CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

---

#3楼

It looks like the height:100% 'chain' is being broken at div#main . 看来height:100% 'chain'在div#main处断裂。 Try adding height:100% to it and that may get you closer to your goal. 尝试增加height:100% ，这可能会使您更接近目标。

---

#4楼

You need to wrap your .container-fluid div in order for your sticky footer to work, you're also missing some properties on your .wrapper class. 您需要包装.container-fluid div才能使粘性页脚正常工作，而且.wrapper类还缺少一些属性。 Try this: 尝试这个：

Remove the padding-top:70px from your body tag and include it in your .container-fluid instead, like so: 从body标签中删除padding-top:70px ，然后将其包含在.container-fluid ，如下所示：

.wrapper > .container-fluid {
    padding-top: 70px;
}

We have to do this because pushing the body down to accommodate the navbar ends up pushing the footer a bit further (70px further) past the viewport so we get a scrollbar. 我们之所以必须这样做，是因为将body向下推以容纳导航栏最终导致将页脚向视口的位置再推（更远70像素），从而获得滚动条。 We get better results pushing the .container-fluid div instead. 我们.container-fluid div可以获得更好的结果。

Next we have to remove the .wrapper class outside your .container-fluid div and wrap your #main div with it, like so: 接下来，我们必须删除.container-fluid div之外的.wrapper类，并用它包装#main div，如下所示：

    

        
...
        

    
  

Your footer of course has to be out of the .wrapper div so remove it from the `.wrapper div and place it outside, like so: 当然，您的页脚必须位于.wrapper div之外，因此请将其从`.wrapper div中删除，然后将其放在外面，如下所示：

    ....


    ....

After thats all done, properly push your footer closer to your .wrapper class by using a negative margin, like so: 完成所有操作后，请使用负边距将页脚正确地推向.wrapper类，如下所示：

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

And that should work, though you're probably going to have to modify a few other things to make it work when the screen is resized, like resetting the height on the .wrapper class, like so: 这应该可行，尽管您可能需要修改一些其他内容才能在调整屏幕大小时正常工作，例如重置.wrapper类的高度，如下所示：

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

---

#5楼

Found the snippets here works really well for bootstrap 发现这里的代码片段非常适合引导

Html: HTML：

  

    
Your content here
  

CSS: 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;
} 

---

#6楼

This is now included with Bootstrap 2.2.1. 现在，它包含在Bootstrap 2.2.1中。

Bootstrap 3.x Bootstrap 3.x

Use the navbar component and add .navbar-fixed-bottom class: 使用navbar组件并添加.navbar-fixed-bottom类：

Bootstrap 4.x Bootstrap 4.x

Don't forget to add body { padding-bottom: 70px; } 不要忘记添加body { padding-bottom: 70px; } body { padding-bottom: 70px; } or otherwise the page content may be covered. body { padding-bottom: 70px; } ，否则页面内容可能会被覆盖。

Docs: http://getbootstrap.com/components/#navbar-fixed-bottom 文件： http ： //getbootstrap.com/components/#navbar-fixed-bottom