Bootstrap 粘性页脚

Question

无论页面上的文本有多少或有多少，让页脚始终保持在页面底部的最佳方法是什么。我尝试了几种不同的想法，但是对于新的引导程序，它不想合作。我已经尝试过修复，但这不是我想要的。

我希望底部的黑色页脚栏始终与页面底部对齐。

我的 CSS：

/* Chrome Frame Prompt
-------------------------------------------------- */
.chromeframe{ margin: .2em 0; background: #ECCC5B; color: #000000; margin-top: -55px; margin-bottom: 55px; padding: .2em 0; z-index: -100 ; text-align :center; }

/* Bootstrap Styles
-------------------------------------------------- */
.navbar-inverse { background-color: #3A3A3A; border-color: #3A3A3A; }
.navbar-inverse .navbar-brand { color: #BE1E2D; font-weight: bold; margin-top: 12px; padding-left: 40px; }
.navbar-inverse .navbar-toggle { margin-top: 20px; }
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF; height: 75px; padding-top: 28px; }
.navbar-inverse .navbar-nav>li>a:hover { color: #BE1E2D; }
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #BE1E2D; }
.dropdown-menu { background-color: #080808; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; }
.dropdown-menu>li>a { line-height: 1.6; color: #FFFFFF; }
.dropdown-menu>li>a:hover { line-height: 1.6; color: #BE1E2D; }

/* Main Styles
-------------------------------------------------- */
html, body { position: relative; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; font: normal 16px/1.5; color: #232525; padding-top: 50px; padding-bottom: 20px; }

.logo { float: left; }
.logo:hover { }

.main-container { padding-bottom: 100px; }
.main-row { padding-top: 15px; }

.footer { position: absolute; color: #999999; background-color: #000000; bottom: 0; width: 100%; height: 100px;  }
.logo-footer { float: left; margin-top: 13px; }
.footer-nav { color: #999999; display: block; float: left; margin: 40px 0 0 15px; }
.footer-copy { float: right; margin: 40px 0 0 0; text-align: left; }

/* RESPONSIVE CSS
--------------------------------------------------*/
@media (max-width:1150px) { 

}
@media (max-width:900px) { 

}
@media (max-width:767px) { 
    .navbar-inverse .navbar-nav>li>a { height: 40px; padding-top: 11px; }
    .footer-copy { float: none; text-align: center; }
}
@media (max-width:340px) { 

}

Answer 1

解决方案是确保您的内容始终至少是屏幕的高度，如果窗口足够大，这将导致页脚被推到屏幕底部。

将您的页面内容（不包括页脚）包装在另一个 <div> 中并按照其样式，将 min-height 设置为 100%

这样做的缺点是页脚现在经常挂在窗口外，要解决这个问题，通过将margin-bottom 设置为页脚的负大小（即，如果您的页脚为 50 像素，margin-bottom: -50px)。

之后您会发现的另一个怪癖是页脚可能会与页面内容重叠，要解决此问题，请将之前的元素插入到包装器 div 中，并使其高度与页脚相同。

例如：

body, html {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}

.push {
    height: 50px;
}

.footer-pad {
    height: 50px;
}

<div class="wrapper">
    <div class="container>
        Some content
    </div>
    <div class="footer-pad"></div>
</div>
<div class="footer">Footer</div>

需要注意的几个重要事项是 html，body 必须设置为 100% 高度，并且 body 必须没有边距，否则你会得到一个恒定的滚动条

http://jsfiddle.net/XJDLk/

Answer 2

我在最近的 boostrap 网站中使用了它。希望对您有所帮助。

HTML

<div class="footer_wrapper">
    <div class="container">
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
    </div>
</div>

css

.footer_wrapper {
  min-height: 270px;
  background-color: #232323;
  color: #8f8f8f;
  bottom: 0;
  padding-top: 0px;
  width: 100%;
}