<html> <head> <style type="text/css"> html, body { height: 100%; width: 100%; padding: 0; margin: 0; } body { display: flex; flex-direction: column; } header { height: 75px; } main { flex: auto; background-color: #ccc; } footer { height: 25px; } </style> </head> <body> <header>header</header> <main>main</main> <footer>footer</footer> </body> </html>
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