使页脚拉伸到屏幕的全长

Question

我的html上有一个包装器。里面有一个页脚。我想找到一种方法，让页脚停留在哪里（文本和图像），但在屏幕的整个长度上都有黑色伸展

任何帮助

#sub-footer {
  margin: 20px auto 0px;
  padding-top: 34px;
  padding-bottom:70px;
  border-top: 1px solid $colorBorder;
  background-color:black;
}



<div id="sub-footer">

  <div class="grid">
    {% if shop.customer_accounts_enabled %}
      <div class="grid-item col-12">
        <div class="footer-nav accent-text large--hide">
        {% if customer %}
        {% capture name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
        {{ 'layout.customer.logged_in_as_html' | t: name: name }}
        {{ 'layout.customer.log_out' | t | customer_logout_link }}
          {% else %}
        {{ 'layout.customer.log_in' | t | customer_login_link }}{% if shop.customer_accounts_optional %}
        {{ 'layout.customer.create_account' | t | customer_register_link }}{% endif %}
          {% endif %}
        </div>
      </div>
    {% endif %}

    <div class="grid-item col-12 large--col-6">
      {% if linklists.footer.links.size > 0 %}
      <div class="footer-nav accent-text" role="navigation">
        {% for link in linklists.footer.links %}
        <a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a>
        {% endfor %}
      </div>
      {% endif %}
      <p id="shopify-attr" class="accent-text" role="contentinfo">{{ 'layout.footer.copyright_html' | t }} {{ "now" | date: "%Y" }} {{ shop.name }}. {{ powered_by_link }}.</p>
    </div>
    {% if settings.show_payment_options %}
    <div class="grid-item col-12 large--col-6 large--text-right payment-types">
      {% for type in shop.enabled_payment_types %}
      <span>
        <img src="{{ type | payment_type_img_url }}">
      </span>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <div class="footer-left-content">

  </div> <!-- #footer-left-content -->


</div><!-- #sub-footer -->