CODEWITHSUNDEEP
htmlcssangular
Paul Erdos
Paul Erdos

Reputation: 1375

Sticky footer doesn't work with Angular 5

Here is my Angular project:

https://stackblitz.com/edit/angular-1g7bvn

I've tried getting the sticky footer from this example to work with no avail:

html {
    height: 100%;  
    font-family: sans-serif;
    text-align: center;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;    
    margin: 0;
}

header{
    flex-shrink: 0;
    background: yellowgreen;
}

.content {
    flex: 1 0 auto;
    background: papayawhip;
}

footer{
    flex-shrink: 0;
    background: gray; 
}

There must be something small I'm doing wrong but I can't see it.

Upvotes: 1

Views: 530

Answers (2)

k.s.
k.s.

Reputation: 3004

Angular is rendering your components as tags, so in your case my-app component is an actual tag on the DOM tree. 

<body>
  <my-app>
    <header></header>
    <section></section>
    <footer></footer>
  </my-app>
</body>

And all of your styles are applied to the body tag. If you add to your app.component.css your styles from body with a :host selector - it will work just fine.

:host {
  display: flex;
  flex-direction: column;
  height: 100%;    
  margin: 0;
}

here's a stackblitzz example

Upvotes: 1

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

Add below to your CSS.

footer{
  position: fixed;
  bottom: 0; 
}

StackBlitz

Upvotes: 0

Related Questions