如何防止固定底栏隐藏内容答案

【问题标题】：How to prevent fixed bottom bar from hiding content如何防止固定底栏隐藏内容
【发布时间】：2017-03-15 19:03:38
【问题描述】：

当用户向下滚动时，我有一个固定的 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 的文本长度可变？

【问题讨论】：

在 content-suffix 上添加一个 margin-bottom
如果您的页脚高度是动态的，您可以尝试使用 jquery 在运行时获取高度，然后也使用 jquery 应用 css
您可以通过使用 100vh 高的列 flex 布局并将内容区域设置为 flex-grow: 1 和 overflow-y: scroll 来拉出一个假的固定页脚，为页脚留出可变高度的空间。像这样的工作？ codepen.io/mcoker/pen/JWyeqW

标签： html css

【解决方案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 等），这仍然有效。

【讨论】：

【解决方案2】：

你需要将位置设置为absolute，给overflow-y会更好，并计算你的身高。

.main-content {
  width: 100%;
  height : calc(100% - 94px) !important;
  background-color: darkgrey;
  overflow-y : auto;
  position:absolute;
}
.content-suffix {
  padding-top: 350px;   
}
.fixed-bottom-bar {  
  position: fixed;
  bottom: 0;
  height : 50px;
  right: 0;
  padding: 1em;
  width: 100%;
  background-color: blue;
}

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

【讨论】：

【解决方案3】：

如果页脚很简单，您可以将其添加到内容的底部并使其隐藏，这样它会占用空间但不会显示。

.main-content {
  width: 100%;
  background-color: darkgrey;
}
.content {
   display: flex;
   align-items: flex-end;
   height: 400px;
}

.bottom-bar {  
  width: 100%;
  background-color: blue;
}

.bottom-bar.space { 
   visibility: hidden; /* hides the element but keeps it space*/
} 

.bottom-bar.fixed {  
  position: fixed;
  bottom: 0;
}

<div class="main-content">
    <div class='content'>Test Content</div>

  <div class="bottom-bar space">
    I'm covering up the<br> Copyright text
  </div>
  <div class="bottom-bar fixed">
    I'm covering up the<br> Copyright text
  </div>

  </div>

【讨论】：

啊 - 所以你是说基本上显示两次，一次隐藏所以它永远不会重叠？

【解决方案4】：

如果您对使用 JavaScript 没有限制，请查看以下代码：

var x =
  document.getElementsByClassName("fixed-bottom-bar");

document.getElementById("forged-fixed-bottom-bar").style.height = "" + x[0].offsetHeight + "px";

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

#forged-fixed-bottom-bar {
  height: 20px
}

<div class="main-content">
  Test Content
  <div class="content-suffix">
    Copyright
  </div>
</div>

<div id="forged-fixed-bottom-bar">
</div>

<div class="fixed-bottom-bar">
  I'm covering up the Copyright text
</div>

【讨论】：