My webpage is structured into three sections: the header, the main, and the footer. The header at the top has a fixed height of 109px with a 6px border. The main section should extend across the entire page below the header and reach the bottom where the footer is positioned. If there is no content to push it down, the footer should rest at the bottom of the screen. The footer itself is 86px tall due to an 80px height and a 6px border at the top. I need assistance in achieving this layout as I am unsure how to proceed.
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
margin: 0;
padding-bottom: 9rem;
min-height: 100%;
}
/* ---------------------------------------------------------------- */
main {
margin-top: 109px;
text-align: center;
min-height: 100%;
min-width: 100%;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 103px;
box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.75);
z-index: 99;
}
#heading {
font-family: "Arial";
color: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
/* ---------------------------------------------------------------- */
#footer {
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
z-index: 98;
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #c1b497;
font-weight: 600;
}<div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
</header>
<main id="main">
</main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>