HTML Structure
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<main>
<p>Main content goes here...</p>
</main>
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>
CSS Styling
/* Reset some basic styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
}
header {
background: #f8f9fa;
padding: 1rem;
}
main {
flex: 1;
background: #e9ecef;
padding: 1rem;
}
footer {
background: #dee2e6;
padding: 1rem;
text-align: center;
}
Explanation
- Flexbox Layout:
-
The
bodyis made a flex container withflex-direction: columnto stack its children vertically. -
The
.containeris also made a flex container withflex-direction: columnandflex: 1to ensure it grows to fill the available space. -
The
maincontent is givenflex: 1to allow it to grow and fill the available space between the header and footer, pushing the footer down naturally when the content is longer.
