Angular Flex Layout: Holy Grail Design

Question

I am trying to create a simple page using Angular Flex Layout. (Actually a I am removing Bootstrap from the application because I am using Angular Material and feel that mixing them is not a good thing). My goal is to set a main page using the "Holy Grail Layout" by just having a Header, Content and Footer.

|------------------------------------|
|              Header                |
|------------------------------------|
|                                    |
|              Content               |
|                                    |
|------------------------------------|
|              Footer                |
|------------------------------------|

Following is the code

app.component.html

<div class="main-container" fxLayout="column">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

app.component.css

.main-container {
  min-height: 100vh;
  border:1px solid black;
}

home.component.html

<div>
  home works!
</div>

home.component.css

div {
  margin: 1px 0px 1px 0px;
  padding: 1px;
  border: 1px solid blue;
  height: 100%;
}

I was expecting that the home component occupies the 100% of the height of the parent, but as we can see by the blue border on the screenshot just below it is not responding on that.

The home-component div is inserted by angular with the element as expected, which does not have any styling. But that should not affect in anything the child elements.

If i set the div height on the home-component to lets say 200px (height: 200px) it grows, but i need it to occupy 100% of the parent defined on the app.component-html.

Different approach

I tried not take in consideration the < router-outlet > element (similar code was substituted by a div with "content" id) but the result is the same:

app-component.html

<div class="main-container" fxLayout="column" fxLayoutAlign="start stretch">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
      <div id="content" fxFlex fxFlexAlign="stretch" fxLayout="row" fxLayoutAlign="start center" style="height: 100%">
        <div fxFlex="auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 1
        </div>

        <div fxFlex="4 0 auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 2
        </div>
      </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

The best was able to achieve is to center the div with the "content" ID, but it does not occupy 100% of the height of its parent as the below picture shows:

I was expecting the fxFlexAlign="stretch" or even fxLayoutAlign="start stretch" instead of fxLayoutAlign="start center" on the "content" div would force it to occupy the 100% height.

Can anyone spot and/or explain me what I am doing wrong? Is this a good approach? Is there a better or smarter way to doing it so?

I am using the official documentation https://github.com/angular/flex-layout/wiki/fxFlex-API

Can someone points me to an example on the internet? I could not find one using Angular Flex Layout.

Thank you

Answer 1

OK, I tried to reproduce your problem on Stackblitz and here is the result: Stackblitz HERE

app.component.html :

<div fxFlexFill fxLayout="column" style="padding: 5px">
  <div fxFlex="none" style="border:2px solid black;">
    <app-header></app-header>
  </div>

    <div fxFlex style="border:2px solid black;">
      <router-outlet></router-outlet>
    </div>

  <div fxFlex="none"style="border:2px solid black;">
    <app-footer></app-footer>
  </div>
</div>

home.component.html :

<div fxFill fxLayout="row">
  <div fxFlex style="border: 1px solid blue; padding: 2px">
    col 1
  </div>

  <div fxFlex="70" style="border: 1px solid blue; padding: 2px">
    col 2
  </div>
</div>

DEMO:

And all that was done with Flex-Layout. I hope this will help you.

PS: You should be careful not to change the height, this can be a problem with Flex-Layout. Use "fxFlex", "fxFill" or "fxFlexFill" instead. (Documentation)

I saw that you were using "fxFlexAlign" but I do not think it exists for Flex-Layout. You have to use "fxLayout" and "fxLayoutAlign" to put in column, or online. Here is a site that helped me a lot for Flex-Layout (Angular Flex-Layout Demos)

Actually a I am removing Bootstrap from the application because I am using Angular Material and feel that mixing them is not a good thing

It is true that using both is not necessarily very good, especially if you use the bootstrap "col" with "flex" of Flex-Layout, but some bootstrap things remain useful to use as "margin" or "padding" which are very simple. So I keep boostrap basically for that.