<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box { display: flex; min-height: 100vh; flex-direction: column; } .box-con { flex: 1; } header{ height:100px; background:red; } footer { height:100px; background:cyan; } </style> </head> <body class="box"> <header></header> <main class="box-con"></main> <footer></footer> </body> </html>