私のコンテナまたは行はページコンテンツの真ん中にあり、フッターウィジェットのようにページの下部に固執しません

Question

これは私が引っ張ったコードです。フッタウィジェットをページの一番下まで押し込む方法はわかりません。フッタは、コンテンツがたくさんあるので、他のページの下部に座っていますが、1ページにはコンテンツの中央に位置しています。

<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> 

私が表示したくないワードプレス属性の属性は表示されません。

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がボディにパディングとして追加されました。私は視覚的に赤いボーダートップを追加しました。