HTML5 & CSS3: Sticky Footer

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>

Leave a Reply Cancel reply