Show Output
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Make a DIV to Fill the Remaining Screen Height</title> <style> html, body{ height: 100%; margin: 0; } .flex-container{ display: flex; flex-flow: column; height: 100%; } .flex-container .header{ flex: 0 1 auto; background: #7e8aa0; } .flex-container .content{ flex: 1 1 auto; background: #dbdfe7; } .flex-container .footer{ flex: 0 1 100px; background: #7e8aa0; } </style> </head> <body> <div class="flex-container"> <div class="header"> <p><strong>Header</strong> (auto height)</p> </div> <div class="content"> <p><strong>Content</strong> (fills remaining space)</p> </div> <div class="footer"> <p><strong>Footer</strong> (fixed height)</p> </div> </div> </body> </html>
