I have organized my webpage into three sections: the <header>, the <main>, and the <footer>.
The <header> is fixed at the top with a height of 109px, including a 6px border, which results in the <main> having a margin of 109px from the top.
I aim for the <main> to occupy the entire space below the <header> and extend all the way down to the <footer>. Even if there isn't enough content to push it down, I want the <footer> to remain at the bottom of the screen as the <main> stretches towards it and showcases a background image.
The height of the <footer> is set at 86px with an 80px base and a 6px upper border.
To achieve this layout properly, I've encountered a challenge. When setting min-height: 100%; on the body to move the footer downwards, a full-screen background image on the <main> requires setting height: 100%; on the body, resulting in the footer remaining at its original position before scrolling occurs.
How can I resolve this issue?
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
/* or min-hight: 100% */
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ---------------------------------------------------------------- */
#all {
height: 100%;
}
#fullmain {
padding-top: 109px;
padding-bottom: 86px;
text-align: center;
background: #f5f5f5 url(" http://pre06.deviantart.net/2bf3/th/pre/i/2010/284/b/d/autumn_fortest_ii_by_lotusonlinede-d30jn9b.jpg") no-repeat center center;
background-size: cover;
min-height: 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: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#heading {
font-family: "titlefont";
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;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#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="fullmain">
</main>
<footer id="footer">
<p id="credit">Footer</p>
</footer>
</div>