How to stop text appearing under <header> or <footer>? - html

Question

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!

Answer 1

If you can give your header and footer a height, you can extend your body with padding. Because the content stays in place, there will be place for your header and footer.
Example:
body{
padding-top: 100px;
padding-bottom: 100px;
overflow-x: hidden;
}
header{
top: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
height: 100px;
}
footer {
bottom: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
height: 100px;
}

Answer 2

in footer and header css add :
z-index:999;

Answer 3

This may not be the best answer but I would have supplied a height to the header and footer. and then the body would be in between with an overflow auto. You can try my sample and see if it looks like what you were expecting. I added the color just to show sections.
CSS
<style>
header{
top: 0;
left: 0;
right: 0;
height:100px;
position: fixed;
color:white;
background-color:#0D47A1;
}
#content{
position:fixed;
top:100px;
bottom:100px;
left:0;
right:0;
background-color:#2196F3;
overflow:auto;
font-size:12em;
}
footer {
bottom: 0;
left: 0;
right: 0;
height: 100px;
position: fixed;
color:white;
background-color: #0D47A1;
}
</style>
HTML
<header>
<div> Header</div>
</header>
<div id="content">
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
</div>
<footer>
<div> Footer</div>
</footer>