JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>A CSS Sticky Footer</title>
<!--
The second stylesheet is to make things look pretty.
The first one is only the important one.
-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="contentcontainer">
<div class="content">
<div id="green-line">
</div>
<div class="center-box">
hello world
<br/>Hello again
<br/>Hello again
<br/>Hello again
<br/>Hello again
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>Move now
<br/>Move now
<br/>Move now
<br/>Move now
<br/>Move now
<br/>Move now
<br/>Move now
<br/>Move now
<br/>Move now
<br/>Move now
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div style="min-height: 7px; background-color: #EDEDED; background-color: whitesmoke;">
</div>
<p>Copyright © 2012 Ryan Fait — <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p>
</div>
</body>
</html>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.contentcontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -137px; /* the bottom margin is the negative value of the footer's height */
background-color: lightblue;
}
.footer, .push {
height: 137px; /* .push must be the same height as .footer */
}
.footer {
background: #ccc;
background-color:red;
}
.push
{
height: 147px; /* .push must be the same height as .footer */
}
.content {
/* for testing */
border-bottom: 1px dashed red;
}
#green-line
{
height: 5px;
background-color: #b8d30b;
}
.center-box
{
width: 90%;
margin: auto;
padding-left: 20px;
}