How to create a sticky footer in CSS
We sometimes notice a footer being placed directly below a webpage’s content which might look rather strange and unprofessional when that specific webpage has only got a few lines of content. Do you experience the same issue and would you like to know how to create a sticky footer at the bottom of your screen? Please take into account it’s a very tricky task to integrate a sticky footer into an existing HTML/CSS. To properly create a sticky footer, we would advise you to create a website from scratch at any time and to create a fully-functional sticky footer by means of the CSS before adding the other website elements:
HTML:
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="header">
<p>This is the header which has a 100% width,</p>
<p>an 150px height and a red background.</p>
</div>
<div class="content">
<p>Here comes the website content.</p>
<p>As you can see, this content is placed within a 1024px wide wrapper</p>
<p>which has a black border on the left and the right</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>This blue footer sticks to the bottom using CSS2.1</p>
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="header">
<p>This is the header which has a 100% width,</p>
<p>an 150px height and a red background.</p>
</div>
<div class="content">
<p>Here comes the website content.</p>
<p>As you can see, this content is placed within a 1024px wide wrapper</p>
<p>which has a black border on the left and the right</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>This blue footer sticks to the bottom using CSS2.1</p>
</div>
</body>
</html>
CSS:
*{
margin: 0;
}
html,
body{
height: 100%;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}
.header{
width: 100%;
height: 150px;
background: red;
}
.header p{
color: white;
}
.content{
margin: 0 auto;
width: 1024px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.footer,
.push{
height: 150px;
}
.footer{
background: blue;
}
.footer p{
color: white;
}
*{
margin: 0;
}
html,
body{
height: 100%;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}
.header{
width: 100%;
height: 150px;
background: red;
}
.header p{
color: white;
}
.content{
margin: 0 auto;
width: 1024px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.footer,
.push{
height: 150px;
}
.footer{
background: blue;
}
.footer p{
color: white;
}