Question 197465 in Html Question posted in
Some basic documentation can be found here.

Html – Move Component to bottom of the page Angular

I’ve created a footer component in my angular application that I want to "stick" to the bottom of the page the way a footer would. I created a footer component, and put it in the default app.component.html file (making it appear on the screen).

The footer appears on the screen however it is in the highest position on the page. I’ve tried two different things to get it to stick to the bottom.

First I tried updating the global styles.css file where I selected the footer component and tried moving it to the bottom of the page.

.app-footer{
    position:absolute;
   bottom:0;
}

Next, I tried changing the styles in the footer.component.css file.

body {
    position:absolute;
   bottom:0;
}

No luck with either. Could anyone explain why my solutions were ineffective as well as how I could properly stick the footer to the bottom of the page?

Tags:

2

Answers


  1. 0

    You should set the class in parent component rather than footer component:

    https://stackblitz.com/edit/angular-material-datepicker-tvxvqt?file=src%2Fapp%2Fapp.component.css

    ts:

    <div class="app-wrapper">
  <app-footer class="footer"></app-footer>
</div>

    styles:

    .app-wrapper {
  height: 100%;
  margin: 0;
}

.footer {
  position: absolute;
  bottom: 0;
  background-color: green;
  width: 100%;
}
    Login or Signup to reply.
  2. 0

    You can try something like this :

    If this is your footer html code –

      <app-footer class="footer"></app-footer>

    then use the following styles in the corresponding css –

    .footer {
      position: fixed;//this will keep the footer position fixed at margin zero
      margin-bottom: 0;
      width: 100%; //adjust this according to how you want
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search