html - 如何防止固定底栏隐藏内容

Question

我有一个固定的 div，它会在用户向下滚动时覆盖页面底部的内容。这尤其会影响移动设备。我在这里重现了这个问题:http://codepen.io/bkuhl/pen/LWjXdx

这是该帖子的代码:

  <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>

和 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;
}

我考虑过的一种方法是将 [padding|margin]-bottom 添加到内容后缀，但在这种情况下，我在固定元素上的内容具有可变长度。

如何确保“版权”文本不被固定元素覆盖，记住 fixed-bottom-bar 具有可变文本长度？

Answer 1

您可以使用 css calc() 属性来实现此目的。添加 margin-bottom: calc(/* the values you want to calculate */); 你没有设置 font-size，但默认是 16px。因此，您可能希望在 content-suffix 的底部添加填充，即 16px + 2em，即页脚的总高度。您的最终代码将是:

.content-suffix {
    padding-top: 350px;
    margin-bottom: calc(16px + 2em);
}

如果您在某处指定文本的字体大小，效果会更好。这可能是一个动态值(例如 1vw、1em 等)，这仍然有效。