Flex-grow 在 Angular 中不起作用<router-outlet></router-outlet>

Question

I create a web application with Angular. I wanted to make a footer that will be at the bottom of the page. If the content of the page was small, the footer would still be at the bottom, not in the middle of the page. For this, I wrote code to push the contents of the <router-outlet> directive down the page. But unfortunately it doesn't work.

This my code in css (code from the styles.css file):

#portal-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

router-outlet {
  flex-grow: 1;
}

app-menu, router-outlet, app-footer {
  flex-shrink: 0;
}

This is the content of my app.component.html file:

<div id="portal-wrapper">
  <app-menu></app-menu>
  <div id="portal">
      <div class="container">
          <router-outlet></router-outlet>
        <div class="row">
          <app-footer></app-footer>
        </div>
    </div>
  </div>
</div>

Theoretically, the content should be pushed down (more precisely, the empty space below it) so that the footer is at the bottom of the page. flex-grow: 1; for <app-menu> works and pushes <router-outlet> down. Any suggestions why <router-outlet> doesn't push footer down?

Answer 1

div with portal-wrapper has two child ie <app-menu> and div portal , when make portal-wrapper into a flexbox you can use flex-grow: 1 only for its child.

flex-grow: 1; for <app-menu> works and pushes <router-outlet> down.

It's actually pushing the div portal down and not just the <router-outlet>

You should make div container into flexbox and add flex-grow: 1 to <router-outlet> .