Can I change CSS stacking on overflow to move upwards? - css

Question

I have in my page the following section:
Screenshot of the bottom of my page
Basically i have a fixed div with some buttons that we show on the bottom of the page. The thing is, sometimes we include only one button, sometimes we include four or five. When you resize the page, the buttons get pushed down, this is the normal behaviour I guess:
What happens when I resize
I was wondering, is it possible to reverse the direction the buttons are being pushed towards? As in, force the div to take more space above itself, and not downwards, therefore keeping the buttons visible?
Our fixed element has the following CSS, in case it is useful
.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

Remove height attribute.
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

Try this with bootstrap.The buttons are just placeholders for a quick demo.Replace them with your actual elements
<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>