Bootstrap Sticky Footer

Question

什麼是最好的方式來獲取頁腳im試圖使總是堅持頁面的底部，無論多少文本或它的頁面上。我嘗試了幾個不同的想法，但是它不想與之合作。我已經嘗試修復，這不是我想要的。

我希望底部的黑色頁腳欄始終與頁面底部對齊。

我的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設置爲否定頁腳大小（即，如果頁腳爲50px，margin-bottom: -50px），頁腳將「下沉」回內容。

之後你會發現另一個怪癖是頁腳可能與頁面內容重疊，爲了解決這個問題，從前面插入一個元素到wrapper 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，身體必須設置爲100％的高度，而且身體必須沒有保證金或者你重要的東西會得到恆定的滾動條

http://jsfiddle.net/XJDLk/

Answer 2

我用這在我最近的助推器網站。希望能幫助到你。

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%; 
}