Universal footer and header?

so I am on making website's front-end using Angular and had component named footer and header. But the component runs as a universal header and footer to all my website components including the list of users and the login, so I need to edit the css position so it doesn't disturb other components like overlapping it or even get the footer up because that part component isn't as full as the others. Should I add function to make the header-footer component to make it more private or maybe some tweaking to something.ts to solve this?

Here is my angular component

• App

  Login List of users Detail of users Register Shared ^component ✓footer ✓header ^ model ^ services(the api helper) Assets Environment