Main section doesnt take up vertical space-CodePudding

I'm working on a new design, were I have a header, a side menu, and a footer within the main section.

Layout design example

I'm trying to make the main section fill the remaining of the space as a minimum height, pushing the footer to the bottom of the page.

I want the main section to take up the remaining space if needed, but everything should scroll when the main section is larger then the view height, so no sticky headers or footers.

is this something that can be done within Bootstrap 5? I see these types of designs often mentioned when talking about CSS grid, but I'm wondering if it's possible without it.

I've tried different setups using bootstrap flex utilities, but my Bootstrap/CSS knowledge 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 >
  <div >
    <div >header</div>
  </div>
  
  <div >
    <div >
      <div >Sidebar</div>
    </div>
    
    <div >
      <div >
        Main
      </div>
      
      <div >
        Main Footer
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You need to make the containing column a flex container, then you can apply grow to the row inside.

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 >
  <div >
    <div >header</div>
  </div>

  <div >
    <div >
      <div >Sidebar</div>
    </div>

    <div >
      <div >
        Main
      </div>

      <div >
        Main Footer
      </div>
    </div>
  </div>
</div>