0

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.

AmigaAbattoir
  • 632
  • 8
  • 21
tekin
  • 145
  • 4
  • 15
  • well, 100% will mostly taken by parent element height. You could use `calc(100vh-50px)` as it will take the viewport height – inubs Aug 13 '18 at 14:59
  • I did use that calculation but the table still overshoots the window visible area. and its parent too. Parent is most of the time component tag and looks like I need to control them too. – tekin Aug 13 '18 at 16:31
  • why it is -1 because of a wrong tag attached? It reduces the credibility of the question. I didn't need to know flex is apache product just like you may not know flex is css property also. – tekin Aug 17 '18 at 08:55

1 Answers1

2

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

theblindprophet
  • 7,767
  • 5
  • 37
  • 55
  • but that would probably mess with the whole layout of application. everything else built on nav being fixed div. can it still be item of a flexbox while fixed? I believe it can't be. – tekin Aug 13 '18 at 16:35
  • But it looks very promising, I should to say this is right solution. I managed to make it grow and footer snapped to the bottom and looks like nav fixed position not causing too much problem which I may solve with some margin or padding. – tekin Aug 13 '18 at 16:50
  • I have a better understanding now. Your answer is correct. But I realised I do not need a wrapper with nav necessarily. I can start this process at any level as long as I have a wrapper div for the rest of the page which covers full rest height that acts as flex container and it needs to be repeated for every angular component nested in. Like the table component wrapper should also need to be a flex and grow 1.... Bit like the same as giving full height to every div inside a full height div... so I have a good working page now. Thanks. – tekin Aug 17 '18 at 08:53