I'm working on a mobile layout design for my css project. My goal is to have the header and footer remain fixed on the screen while allowing users to scroll through the content in between. I was able to achieve the fixed positioning, but now none of my text is showing up.
body {
width: 21em;
}
.header,
.footer,
.content {
display: flex;
flex-direction: row;
}
.header,
.footer {
z-index: 2;
}
.header {
position: fixed;
width: 100%;
height: 30%;
background-color: red;
}
.content {
position: absolute;
width: 100%;
height: 500%;
clear: both;
text-align: center;
}
.footer {
position: fixed;
width: 100%;
height: 30%;
background-color: green;
margin-top: 120%;
}<div class='header'></div>
<div class='content'>
<p>
Despite facing challenges during his childhood, he always felt loved and protected by his mother. Family was everything to her, and this dedication resonated deeply with her son. His faith became an integral part of his life, which he gladly shared with others. He found comfort in accepting the teachings of missionaries, leading him to strengthen his faith, be baptized, and receive the gift of the Holy Ghost. He emphasized that following Christ is simple yet profound.
</p>
</div>
<div class='footer'></div>