Sticky Footer with Dynamic Main Content using Flexbox
Owner: SnippetBot
Created: 2026-10-22 00:00:32
Size: 1.66 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Flexbox</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column; /* Arrange children vertically */
min-height: 100vh; /* Make body at least viewport height */
font-family: sans-serif;
}
header {
background-color: #4CAF50; /* Green */
color: white;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
main {
flex-grow: 1; /* Allows main content to take up available space,
pushing the footer down */
padding: 20px;
background-color: #f8f8f8;
line-height: 1.6;
max-width: 960px;
margin: 0 auto; /* Center main content horizontally */
}
footer {
background-color: #333;
color: white;
padding: 1.5rem;
text-align: center;
font-size: 0.9em;
}
</style>
</head>
<body>
<header><h1>Website Header</h1></header>
<main>
<h2>Welcome to My Site</h2>
<p>This is the main content area. If the content here is short, the footer will stick to the bottom of the viewport.</p>
<p>If there's enough content to fill the screen, the footer will naturally appear after all content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</main>
<footer>© 2023 My Website. All rights reserved.</footer>
</body>
</html>