When the position property is set to relative with no content, the footer moves up. However, when set to absolute with a lot of content, the footer moves down. And with fixed, the footer remains in place at all times.
Is there a simple way to ensure that the footer always stays at the end of the page, regardless of the amount of content, and adjusts its position based on the content?
In cases where there is a large amount of content, the footer appears at the bottom of the first page. Conversely, when there is minimal content, it will be positioned at the very bottom of the page.
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
main {
flex: 1; /* Grow to fill remaining vertical space */
text-align: center;
padding: 20px;
}
footer {
background-color: #333;
color: white;
padding: 20px;
margin-top: auto; /* Push footer to the bottom */
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
header
</header>
<main>
main
</main>
<footer>
footer
</footer>
</body>
</html>