Search code examples
angularflexboxngx-datatable

Making div to fill the space between nav and footer but with angular components

I have been trying to get my answer from this post Make a div fill the height of the remaining screen space

But I couldn't make it work for me. I have my nav as separate component and after the nav the container is holding all the other divs so I need that one to stretch and use flex column.

Here is the structure of an example page I did.

<nav class="navbar navbar-dark bg-primary navbar-expand-md justify-content-between fixed-top ng-tns-c0-0 ng-star-inserted">...</nav>
<div class="container-fluid">
  <section>
    <div class="row">
      <div class="col p-5 ">
        <form>
          <input placeholder="I am a field"  class="md-form  form-control"/>
        </form>
      </div>
    </div>
  </section>
  <app-table-container class=""></app-table-container>
  <footer>
    <div class="row">
      <div class="col p-5 ">
        <button class="btn btn-lg"> I am a button</button>
      </div>
    </div>
  </footer>
</div>

And here is some of the css because I have some in the component too. 

.container-fluid{
  display:flex;
  flex-flow: column;
  padding-top:50px;
  background-color:red;
  height: calc(100% - 50px);

}

section{
  background-color: #ffc727;
  flex:0 1 auto;
}


footer{
  background-color: #9cc8ff;
  flex:0 1 auto;
}

My routes are loading into the container fluid so I do not want to bring Nav in every page. Inside the app-table I have an ngx-datable which I want it to stretch as much as its container which is in between section and footer. But no page is now half height body is 100% but it does not obey that.

It looks like this enter image description here

I would like to know how is it possible to make sure that page itself does not scroll the table grows as much as the middle part and nothing else scrolls either. ngx-datable handles fixed header and scrolling.

When I have just the container-fluid I can make it work.

Solution

  • To make .container-fluid stretch to cover the remaining space you need a parent element around it and the <nav>. It must have display: flex and flex-direction: column and .container-fluid must have flex-grow: 1.

    <div class="wrapper">
    <nav>...</nav>
    <div class="container-fluid">...</div>
</div>


.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.container-fluid{
  display:flex;
  flex-flow: column;
  padding-top:50px;
  background-color:red;
  flex-grow: 1;
}

    JSFiddle