html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* vh stands for viewport height */
}

.flex-grow-1 {
    flex-grow: 1; /* This ensures this div takes up available space, pushing the footer down */
}

/* Optional: If your header has a fixed height, you might need to account for it in main content or ensure it doesn't shrink */
header {
    flex-shrink: 0; /* Prevents the header from shrinking if content is too long */
}

footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
}