HTML5 & CSS3: Sticky Footer

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>kklw</title> <link rel="stylesheet" href="./embed/bootstrap/default/bootstrap.min.css" /> <link rel="stylesheet" href="./embed/bootstrap/fonts/font-awesome.min.css" /> </head> <body> <div id="wrapper"> <header></header> <div id="content"></div> <div id="footer"></div> </div> </body> </html>
div#wrapper{ min-height:100%; position:relative; background-color:blue; } body{ padding:0; height:100%; background-color:grey; } div#content{ padding-bottom:200px; } div#footer{ width:100%; height:100px; position:absolute; bottom:0; left:0; background-color:black; } header{ width:100%; min-height:200px; background-color:red; } html{ height:100%; margin:0; }
Source code: <a href=”http://blog.nasrulhazim.com/wp-content/uploads/2015/10/sticky-footer”>Sticky Footer</a>