Despite the numerous similar questions on Stack Overflow, I am struggling to get my footer positioned correctly on my page. The <footer> stubbornly remains 800px above the bottom behind the <main>. Even with various height options such as 100%, fit-content, <main> refuses to extend all the way down.
All I want is a standard footer at the bottom of the page.
Moving the footer inside the main div does solve the issue, but this approach is not preferred.
Can anyone identify the problem?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", sans-serif;
}
header {
height: 60px;
background-color: rgba(255, 255, 255, 0.723);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 100px 0px 120px;
color: gray;
width: 100%;
position: fixed;
top: 0;
z-index: 100;
}
main {
height: auto;
}
.expgrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 50px;
column-gap: 20px;
row-gap: 50px;
height: fit-content;
}
.exp {
width: fit-content;
position: relative;
margin: auto;
}
footer {
width: 100%;
height: 75px;
background-color: #29292c;
}<header>
<h1>Header</h1>
</header>
<main>Main Content</main>
<footer>Footer</footer>