JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<div class="navbar">
    <span>Fixed Header (content under here)</span>
</div>

<div class="content">
<div class="lol">
<h1>
sadasd
</h1>
</div>
    <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">
    <span>Sticky footer!</span>
</div>

CSS

body, html{min-height:100%;height:100%; width:100%; margin:0px;padding:0px;font-family:arial;}
p {margin:0;}
.lol {
  position:sticky;
  top:12px;
}
.navbar
{
    position:fixed;
    top:0px;
    text-align:center;
    width:100%;
    height:45px;
    background:#454545;
    line-height:45px;
    color:#ccc;
    border-bottom: 1px solid #FFF;
}

.content
{
    /* height:100%; width:100%;  Why wont these work??? */
    min-height:100%;
    height: 300px;
    background:#3b3b3b;
    text-align:center;
    color:#FFF;
    margin-bottom: -45px; /* for footer */
}

.content:before {
  content: "";
  display: block;
  height: 45px;
}
.footer, .content:after {
  /* .push must be the same height as footer */
  height: 45px; 
}
.footer {
  background: #454545;
    color: #FFF;
    text-align:center;
    line-height:45px;
    height:45px;
}