title: How to prevent fixed bottom bar from hiding content
body: <p>I have a fixed div that is covering up content on the bottom of my page when the user scrolls down.  This specifically impacts mobile devices.  I've recreated the problem here: <a href="http://codepen.io/bkuhl/pen/LWjXdx" rel="nofollow noreferrer">http://codepen.io/bkuhl/pen/LWjXdx</a></p>
  
  <p>Here's the code from that post:</p>
  
  <pre><code>  &lt;div class="main-content"&gt;
      Test Content
      &lt;div class="content-suffix"&gt;
        Copyright
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="fixed-bottom-bar"&gt;
      I'm covering up the Copyright text
    &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.main-content {
    width: 100%;
    min-height: 400px;
    background-color: darkgrey;
  }
  .content-suffix {
    padding-top: 350px;
  }
  .fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1em;
    width: 100%;
    background-color: blue;
  }
  </code></pre>
  
  <p>One approach I've thought about is adding a <code>[padding|margin]-bottom</code> to the content-suffix, but in this case my content on the fixed element has a variable length.</p>
  
  <p><strong>How can I make sure the "Copyright" text isn't covered by the fixed element, keeping in mind the <code>fixed-bottom-bar</code> has a variable text length?</strong></p>