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

Question

我一直在尝试使用固定位置在我的网络应用程序上显示“操作栏”。此操作栏将包含与活动表单相关的各种按钮，并且应始终在用户视图的底部可见，使其主要功能易于访问。

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

请参阅提供的代码段：

* {
  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;
}

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

编辑：

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