我可以改变溢出的CSS堆叠向上移动吗？

Question

我的页面中有以下部分。我的页面底部的截图

基本上，我有一个固定的div，里面有一些按钮，我们显示在页面的底部。问题是，有时我们只包含一个按钮，有时我们包含四个或五个。当你调整页面大小时，按钮会被推倒，我想这是正常的行为。

我想这是正常的行为：

我想知道，是否可以把按钮的方向反过来？例如，迫使div在自己上方占据更多的空间，而不是向下，从而保持按钮可见？

我们的固定元素有以下CSS，如果有用的话

.actions_fixbar {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100%;
  z-index: 9;
  background: #fff;
  height: 50px;
  box-shadow: 0px 0px 5px 0px #ddd;
}

Answer 1

移除 height 属性。

let a = 1;
function addButton() {
 $('#footer').append('<button>Button '+ ++a+'</button>');
}

#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #c4c4c4;
}
button {
width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addButton()">Add more button</button>

<div id="footer">
  <button>Button 1</button>
</div>

Answer 2

试试这个bootstrap.按钮只是一个快速演示的占位符。

  <style>
    footer{
      position: fixed;
      bottom: 0;
      width: 100vw;
    }
  </style>

<footer>
    <div class="container">
      <div class="row ">
        <div class="col">

          <button>Back</button>
        </div>
        <div class="col">
          <button>Submit</button>
        </div>
        <div class="col">
         <button>Request to update</button>
        </div>
        <div class="col">
          <button>Export by default</button>
         </div>
      </div>
    </div>
  </footer>