Question

我一直试图找到一个动作栏＆＃39;使用固定位置显示在我的Web应用程序上此操作栏将包含与活动表单相关的各种按钮，并且应始终显示在用户视图的底部，使其主要功能易于访问。

使用固定位置，我设法让它在某种程度上工作，但它干扰了我的页脚，它总是卡在底部。有没有办法让操作栏位于页脚顶部而不是重叠，而不使用JavaScript或JQuery来确定何时推动栏。

请参阅提供的代码段：

＆＃13;

* {
  margin: 0;
  color: white;
  font-size: 20px;
}

.example-header {
  display: block;
  width: 100%;
  height: 80px;
  background-color: red;
  
}

.example-inner-body {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: blue;
}

.example-inner-body span {
  position: absolute;
  bottom: 0;
  left: 0;
}

.action-bar {
  position: fixed;
  width: 100%;
  height: 35px;
  background-color: rgba(0,0,0,0.7);
  bottom: 0;
  left: 0;
  right: 0;
}

footer {
  display: block;
  width: 100%;
  height: 40px;
  background-color: yellow;
  color: black;
}

＆＃13;

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Page Title</title> 
  </head> 
  <body> 
    <div class="example-header">Header</div>
    <div class="example-inner-body">iBody
    <span> Don't go below me, but feel free to go up!</span>
    </div>
    <div class="action-bar">Action Bar</div>
    <footer>Footer - Do not cover me! </footer>
  </body> 
</html>

＆＃13;

编辑：

使用边距是不够的，因为当滚动下面的白色间隙时（页脚所在的位置）。

Answer 1

在问题评论中使用 Morpheus 的建议，我将使用position sticky。正如用户所说的那样，它并没有得到很好的支持，所以我所做的就是先将操作栏设置为相对，然后设置为粘性，这样总会有后退。

＆＃13;

mult/add/etc

＆＃13;

修复了操作栏，考虑了页脚

1 个答案: