1

My question is almost exactly like this one : CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page The main difference being that I could not get any of these answers to work in my case

What I am trying to achieve :

  • if the page does not posses enough content for a scroll, the footer is displayed at the bottom of the page
  • if the page posses enough content to scroll, the footer is displayed at the bottom of the content ( does not stick to the bottom of the screen )

The main issue here is that I have a lot of extra div in the hierarchy and I struggle to understand how to apply the given solution on them.
The best I could achieve was either to get the div at the bottom of the content regardless of it's length or to overlap the header.

My code looks like this :

( index.html ):

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

( app.component.html )

<div id="body-container">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

( footer.html )

<div id="footer">
  <p>footer works!</p>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Matthieu Raynaud de Fitte
  • 2,001
  • 3
  • 25
  • 49

1 Answers1

1

Move your footer component out of body-container and apply the following style:

index.html

  <body>
    <div id="body-container">
        <app-header></app-header>
        <router-outlet></router-outlet>        
    </div>

    <app-footer></app-footer>

  </body>

Your css file

  html, body {
    height: 100%;
    margin: 0;
  }
  #body-container {
    min-height: 100%;
  
    /* Equal to height of footer */
    /* But also accounting for potential margin-bottom of last child */
    margin-bottom: -50px;
  }
  #footer {
    height: 50px;
  }

Tips: It's a good practice use the footer tag to footer of the page, header tag to header the page. Like this:

<header>The header page </header>
<main>Your content</main>
<footer>The footer page </footer>
Wellington Júnior
  • 264
  • 1
  • 5