HTML CSS examples for CSS Widget:Footer aligned bottom
Keep footer at the bottom of the page and make the page grow as needed
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .site {<!--from w w w .ja v a2 s .c o m--> display:flex; min-height:100vh; flex-direction:column; } .site-content { flex:2; } </style> </head> <body class="site"> <header> Lorem ipsum </header> <main class="site-content"> Lorem ipsum d </main> <footer> <h1>Lorem ipsu</h1> </footer> </body> </html>