CSS For Keeping Footer At Bottom of Viewport

/* Make the HTML and body elements take up the full height of the viewport */

html, body {

height: 100%;

margin: 0; /* Remove default margins to prevent spacing issues */

}

/* Set the body to use Flexbox */

body {

display: flex;

flex-direction: column; /* Stack children vertically */

}

/* Main content area will grow to fill available space */

main {

flex: 1; /* Fills the space between the header and footer */

}

/* Footer will stick to the bottom */

footer {

margin-top: auto;

}