<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/> <title>Title</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } .container{ width: 100%; height: 100%; position: relative; padding-bottom: 100px; box-sizing: border-box; } .header{ width: 100%; height: 100px; background-color: #00a2d4; } .content{ width: 100%; height: 300px; background-color: #0BB20C; } .footer{ width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #1ab394; } </style> </head> <body> <div class="container"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div> </body> </html>
