body { width: 100%; margin: 0; display: flex; min-height: 100vh; /*always have atleast the height of viewport*/ } .main { display: flex; flex-direction: column; } .main__section { flex-grow: 1; /*magical line*/ } .main__footer { margin-top: auto; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter