How to stop text appearing under or ?

I'm working on a Web Dev project for uni and I've got Header and Footer tags that are fixed to always appear. However, as a result, the text in the main body of the web page disappears under them. How would I go about preventing this?

CSS included for reference.

header{
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    background-color: #d3d3d3;
    width: 100%;
}

footer {
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background-color: #d3d3d3;
    width: 100%;
}

Thanks all!