Looking for assistance in achieving a flex column layout with Bootstrap, where the header and footer areas adjust their height automatically while the content area remains scrollable. The issue arises when hiding or removing the "previous button" from the footer with the col-auto class, causing a break in height alignment. Any solutions?
setTimeout(() => {
document.querySelector('.prev-btn').remove();
}, 2000);html,
body {
height: 100%;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc0dcc1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid p-0 h-100">
<div class="row g-0 flex-column h-100">
<header class="col-auto bg-secondary">
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="col d-flex align-items-center justify-content-center overflow-auto">
<div class="col-6 py-3 m-auto">
Content area
</div>
</div>
<footer class="col-auto">
<div class="container-fluid p-3 bg-light">
<div class="row g-0 align-items-center">
<div class="col">
<button class="btn fw-bold btn-outline-danger shadow-none">CANCEL & RESTART</button>
</div>
<div class="col-auto px-3 text-center">STEP 1 OF 4</div>
<div class="col">
<div class="d-flex justify-content-end">
<button class="btn fw-bold btn-outline-primary px-5 shadow-none">NEXT</button>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>