The CSS min-height property sets the smallest vertical size an element's box may have. Setting min-height: 100vh makes the body at least as tall as the browser viewport—like giving the page a floor that cannot drop below the screen. section 15.6
Keep the footer at the bottom
Use min-height: 100vh on a body that stacks its sections vertically. When the page has too little content to fill the screen, the body still reaches the viewport's bottom, allowing the footer to appear there. section 15.6
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 50em;
min-height: 100vh;
}
Inspect a complete body rule combining a vertical Flexbox layout, a maximum width, and min-height: 100vh. section 12.6
