页脚不直接位于内容之下 - 似乎留下大的空白，或者坐在内容的中间

Question

我有这个页脚，上面是一个内容div（位于另一个div中以创建一个漂亮的填充边框）。由于某些原因，页脚在内容之后不会直接排成一行，或者如果内容很长，则页脚似乎出现在内容的中间。

HTML：

   <div class="content-wrapper clearfix">
  <div id="content">
  {% if template == 'list-collections' %}
    {% include 'collection-listing' %}
  {% else %}
    {{ content_for_layout }}
  {% endif %}

  {% unless template contains "customer" or template contains "cart" %}
    {% include 'col-widgets' %}
  {% endunless %}
  </div>
</div>
</div><!-- /.content -->
<!-- Footer -->
<footer id="bottom">

的CSS：

.wrapper{
  width: 810px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
  min-height:100%;
  }
.ie6 .wrapper{ height: 100%; } 

      #content {
      width: 810px;
      background-color:#fff;
      position: absolute;
      height:auto;
      } 

#col-main{
  -moz-box-sizing: border-box;
    margin-top:0px;
  line-height: 2;
    margin: 5px;
  padding: 30px;
  background-color: #FFFFFF;
  float: center;
  position: relative; z-index: 1;
  height: 200px;
  background-color: #FFFFFF;
  border: 1px solid #D5DCE1;
  height:auto;
  }

问题的照片：

Answer 1

我认为这足以让你以正确的方式前进。最小高度是问题的开始。

.wrapper {
    margin: 0 auto;
    /* min-height: 100%; REMOVE THIS */
    overflow: hidden;
    padding: 0 20px;
    text-align: left;
    width: 810px;
}

#content {
    background-color: #FFFFFF;
    height: auto;
    /* position: absolute; REMOVE THIS */
    width: 810px;
}

#col-main {
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #D5DCE1;
    height: auto;
    line-height: 2;
    margin: 0 5px 5px; /* UPDATE THIS */
    padding: 30px;
    position: relative;
    z-index: 1;
}