我的容器或行位於頁面內容的中間，並不像頁腳底部那樣粘在頁腳的小部件上應該是

Question

這是我拉過的代碼。我不知道如何將頁腳小部件推到頁面底部。頁腳位於其他頁面的底部，因爲頁面內容不多，但在一頁上，它位於內容的中間。

<footer id="colophon" class="site-footer" role="contentinfo"> 
    <div class="container"> 
    <div class="row"> 
     <div id="footer-widget-area" class="row"> 
     <div class="footer-widgets-1 col-md-12"></div> 
     </div> 
     <aside id="black-studio-tinymce-4" class="widget_black_studio_tinymce widget well"> 
     <div class="textwidget"> 
      <h6 style="text-align: center;"> 
      <span style="color: #000000;">© 2016 xxxx LLC | Location| Phone Number | email@gmail.com</span> 
      <br> 
      <em> 
       <span style="color: #000000;"> All photos, designs, layouts, and content on this website, including blog, are under copyright, unless otherwise noted. If you would like to borrow an image and/or content, kindly request for permission.</span> 
      </em> 
      </h6> 
     </div> 
     </aside> 
     <div class="col-md-9"> 
     <div class="site-info"></div> 
     <div class="attribution"> 
      <span class="attribution-theme-mods"> 
      <a href="http://www.website.com/attribution/">Special Thanks</a> 
      </span> 
     </div> 
     </div> 
     <div class="col-md-3"></div> 
    </div> 
    </div> 
</footer> 
</div> 
<div style="display:none"></div> 

歸屬地，顯示沒有用於WordPress的歸屬，我不想顯示。

Answer 1

這裏有一個工作版本：

http://jsbin.com/qepuxay/edit?html,css,output

關鍵CSS：

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    padding-bottom: 140px; 
} 

footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 140px; 
    border-top: 1px solid red; 
} 

注：這需要頁腳的高度是 '已知的' - 我把它設置爲140px，與140px添加爲填充身體。我還爲視覺目的添加了一個紅色邊框。