I am currently working on a new design that includes a header, side menu, and footer within the main section.
My goal is to have the main section fill the remaining space with a minimum height, pushing the footer to the bottom of the page.
I want the main section to expand to take up any extra space if needed, but everything should scroll if the main section exceeds the view height, without using sticky headers or footers.
Is it possible to achieve this layout within Bootstrap 5? I have seen similar designs discussed in relation to CSS grid, but I am curious if it can be done without it.
I have attempted various configurations using Bootstrap flex utilities, but my knowledge of Bootstrap/CSS only goes so far.
html,
body {
height: 100%;
}
.flex-grow {
flex: 1;
}
.header {
height: 100px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" defer></script>
<div class="h-100 container-fluid d-flex flex-column">
<div class="row bg-warning">
<div class="col-12 py-4 header">header</div>
</div>
<div class="row no-gutter flex-grow">
<div class="col-1 bg-primary">
<div class="sidebar-item">Sidebar</div>
</div>
<div class="col-11 px-0">
<div class="main bg-success flex-grow">
Main
</div>
<div class="bg-danger py-3">
Main Footer
</div>
</div>
</div>
</div>