Sticky footer with a fixed header.

by Girisha Chennura

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="navbar">
    Fixed Header
</div>

<div class="content">
    <p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
</div>

<div class="footer">
    Sticky footer!
</div>

CSS

body, html{min-height:100%;height:100%; width:100%; margin:0px;padding:0px;font-family:arial;}
p {margin:0;}

.navbar
{
    position:fixed;
    top:0px;
    text-align:center;
    width:100%;
    height:45px;
    background:#eee;
    line-height:45px;
    border-bottom: 1px solid #ccc;
}

.content
{
    height:100%;
    min-height:100%;
    height: 300px;
    text-align:center;
    margin-bottom: -45px; /* for footer */
}

.content:before {
  content: "";
  display: block;
  height: 75px;
}

.footer, .content:after {
  /* .push must be the same height as footer */
  height: 45px; 
}

.footer {
  background: #ccc;
    text-align:center;
    line-height:45px;
    height:45px;
}