css - 我的容器或行位于页面内容的中间，而不是像页脚小部件那样粘在页面底部

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>

属性，display none是我不想显示的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 作为填充。出于视觉目的，我还添加了红色边框。