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: <http://codepen.io/bkuhl/pen/LWjXdx>

Here's the code from that post:

```
  <div class="main-content">
    Test Content
    <div class="content-suffix">
      Copyright
    </div>
  </div>
  <div class="fixed-bottom-bar">
    I'm covering up the Copyright text
  </div>

```

and CSS:

```
.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;
}

```

One approach I've thought about is adding a `[padding|margin]-bottom` to the content-suffix, but in this case my content on the fixed element has a variable length.

**How can I make sure the "Copyright" text isn't covered by the fixed element, keeping in mind the `fixed-bottom-bar` has a variable text length?**