1
HTML/CSSBeginner#css#grid
HTML/CSSIntermediate#css#layout-puzzle#flexbox
How do you build a sticky footer that stays at the bottom even with little content?
Make the body a flex column with min-height: 100vh, let the main content area grow with flex: 1, and the footer naturally sits at the bottom whether content is short or long.
Example
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }
footer { flex-shrink: 0; }