CODEWITHSUNDEEP
javascripthtmlcssangular
João Casarin
João Casarin

Reputation: 926

Footer works with Angular <router-outlet>

I'm creating a website with Angular2+, and basically in the main file there are 3 "sections": header, content, footer.

The goal is to make the header and the footer behave like expected, which is: header always on top, but when I scroll, it disappear. Content is 100vh - header size - footer size. And footer is always at the bottom, so if there's nothing in the content, the footer is at the bottom, and when there are stuffs that can't be shown without scrolling, the footer disappear and goes to the bottom of the page.

Well, that's working ONLY IF the content is directly put in the div content. If the content is from another component, and that comes from the tag inside the div content, the page doesn't work as expected, like, the content goes over the footer.

You can see the entire code here: https://github.com/joaocasarin/joaocasarin.github.io

And you can see the website here: https://joaocasarin.github.io

In the homepage everything is okay, because the content is small, there's no need of scrolling.

But if you go to the Skills menu, you will see the problem:

image of the screen with big content getting over the footer

Upvotes: 0

Views: 1520

Answers (1)

Sandman
Sandman

Reputation: 1569

Remove:

height: calc(100vh - 80px - 50px);

on .wrapper in app-skills component.

Add on .wrapper in app-skills component:

position: relative;
min-height: 100%;
padding: 0 0 100px;

Where "100px" is the choosen height of your footer.

With height on .wrapper removed: enter image description here

Edited: Don't add the styles on .footer.

Stackblitz edited: https://stackblitz.com/edit/angular-discord-ht7hmq?file=src%2Fapp%2Fskills%2Fskills.component.css

Upvotes: 1

Related Questions