HTML5 & CSS3: Sticky Footer
Oct
27
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=”https://github.com/nasrulhazim/bootstrap-studio-samples/tree/master/sticky-footer”>Sticky Footer</a>