CODEWITHSUNDEEP
cssangularsticky-footer
SamDevx
SamDevx

Reputation: 2368

How to create a sticky footer in an Angular2 app?

A sticky footer sticks to the bottom of a web page regardless of how much content the footer has. This is a solved problem if you use FlexBox commands in the web page's CSS stylesheet. All modern browsers support FlexBox.

However, using Angular2 to build a web app, I am unable to apply the simplest of the FlexBox commands! The footer does not stick to the bottom! Here's my plunker to demonstrate the issue.

In the plunker app, style.css contains a very simple Flexbox commands and it works - just simply replace the content of index.html with index1.html and see how the sticky footer is working great without Angular being present. With Angular2 app, I am using the same style.css so I added the the following template to the app, clearly marking the CSS classes main and footer as follows.

<div class="main">
  <h2>Hello {{name}}</h2>
</div>
<footer class="footer">
  <h3> this is footer </h3>
</footer>

However, the footer never sticks.

Has anyone been able to solve this issue in Angular2? Does Angular2 have another way to provide sticky footer?

Any thoughts and ideas would be greatly appreciated.

Upvotes: 3

Views: 4071

Answers (3)

Yoav Schniederman
Yoav Schniederman

Reputation: 5391

you can create footer component like this:

@Component({
  selector: 'app-footer',
  templateUrl: './app-footer.component.html',
  styleUrls: ['./app-footer.component.scss']
})
export class FooterComponent implements  {

}

and in the app.component.html add the footer under router-outler tag

    <div>
      <router-outlet></router-outlet>
      <app-footer></app-footer>
    </div>

Upvotes: 0

Simon Fox
Simon Fox

Reputation: 10561

Your problem is that you are defining the site div as the flex container and targeting footer as a flex item, but when you introduce the angular my-app element, footer is no longer a child of site (it is a child of my-app and thus a grandchild of site).

flex items need to be children of the flex container.

Upvotes: 3

Sagar C
Sagar C

Reputation: 73

Include footer CSS in your code.

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

Upvotes: 1

Related Questions