How to show all the content of the block-CodePudding

I need your help. I have 3 components: header, main and footer. Also, I use a bootstrap. The fact is that I have a lot of text in the main component, and I tried to attach the main and footer components to the top and bottom. It seems to work well, but if you try to scroll even lower, you can see that behind the footer and behind the header there is text that is in the main component, which is hidden. Question: how to correctly attach the header and footer to the top / bottom and how to show all the text in the main? Thank you)

main.html

<div >
   <p>Main</p>
   <p>Main</p>
   <p>Main</p>
</div>

header.html

<nav >
</nav>

header.css

.header{
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}

footer.html

<footer ></footer>

footer.css

.footer {
  position: fixed;
  bottom: 0;
  width: 100%
}

app.component.html

<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>

CodePudding user response：

Your issue is likely position:fixed, as it takes the element out of page flow.

Try adding margin-top and margin-bottom, or position attributes to your main element.

A minimal reproducible example also helps us with fixing the issue.

CodePudding user response：

Can you input your code to the (https://codepen.io/) to make it easy to help you?