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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用css UITextFields属性来实现此目的。添加calc()您尚未设置字体大小，但默认值为16px。因此，您可能希望在内容后缀的底部添加填充，该内容后缀为16px + 2em，即页脚的总高度。你的最终代码是：

margin-bottom: calc(/* the values you want to calculate */);

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

.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 个答案: