CODEWITHSUNDEEP
htmlangularcssflexbox
mykhailo
mykhailo

Reputation: 117

angular2 - set height of components using flexbox

Assuming my "main" app.component.html has only three lines of code in there:

<app-header-component></app-header-component>
<app-content-component></app-content-component>
<app-footer-component></app-footer-component>

where I want header component to occupy approximately 10% of the screen, for content to have 70% and for the footer - 20%, using the flexbox layout, and this size should not be changing how much of content is in respective components. I tried adding flexbox myself but the ratio changes, especially for the <app-content-component>. I believe that the issue is that <app-content-component> has multiple nested components inside and that is why the ratio I need does not stay the same way.

Upvotes: 0

Views: 408

Answers (2)

Asons
Asons

Reputation: 87191

The simplest way to set up something like that is to use flex-grow/flex-shrink, where they get n part of the available space, here set to full viewport height.

flex-basis is set to 0 so the content doesn't affect how the space is distributed between items.

It will keep the 10%/70%/20% ratio for the items but both header/footer can still adjust in height if they need to, which kind of is the purpose using Flexbox.

Stack snippet

body {
  margin: 0;
}
my-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

app-header-component {
  flex: 1 1 0;                   /*  1 part(s) of 10  */
  background: lightblue;
}
app-content-component {
  flex: 7 7 0;                   /*  7 part(s) of 10  */
  background: lightgreen;
  overflow: auto;
}
app-footer-component {
  flex: 2 2 0;                   /*  2 part(s) of 10  */
  background: lightblue
}
<my-container>
  <app-header-component>
    Header
  </app-header-component>
  <app-content-component>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
    Content with many lines<br>
  </app-content-component>
  <app-footer-component>
    Footer
  </app-footer-component>
</my-container>

Note, the 10 in i.e. /* 7 part(s) of 10 */ is the sum of each set flex-grow/flex-shrink.

Upvotes: 1

Alic W
Alic W

Reputation: 138

What's your css for these components? Are you explicitly setting flex-grow and flex-shrink? If using shorthand flex, I would use:

flex: 0 0 10%;

Also, set parent container (body maybe in your case, or app root) to stretch to 100% height:

app-root {
  min-height: 100vh;
}

Upvotes: 0

Related Questions