JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<div id="content">
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe tempore officia neque quasi ipsa impedit porro iure veritatis eius autem delectus qui aliquam excepturi culpa ipsam doloremque numquam asperiores repellendus.</span>
    <span>Quaerat aliquid molestiae quibusdam odio nesciunt deleniti rem. Minima quos tenetur maxime ratione aperiam ut dolorem atque totam error natus eligendi officia nostrum! Laudantium at consequuntur explicabo ipsa laborum qui.</span>
    <span>Ex explicabo veritatis optio rerum tempore ad necessitatibus illum consequatur magni sed sapiente ratione qui voluptate. Unde iure iste fugiat esse nihil ab voluptate. Recusandae accusantium fugit expedita atque ab.</span>
    <span>Repellendus tempora voluptatibus id beatae ipsa odio quasi qui culpa nam enim laborum consequatur quod libero sapiente dignissimos placeat itaque officia magnam nihil laudantium temporibus quo asperiores. Non consectetur earum.</span>
    <span>Delectus ad officiis culpa quia quae nam vero voluptate dolorum enim inventore nemo in assumenda necessitatibus labore iste saepe est incidunt quam dolor consequatur odio sint minima mollitia! Tempore enim.</span></p>
    <div class="spacer"></div>
</div>
<div id="footer">Footer</div>

CSS

* { padding: 0; margin: 0; }
html, body { height: 100%; width: 100%; }

/******** + Sticky Footer ********/
#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */
}

.spacer, #footer {
    height: 100px;
}

#footer {
    position: relative;
    z-index: 1;
}
/******** - Sticky Footer ********/




/********  S T Y L I N G  ********/

#content {
    background-color: gold;
}

#footer {
    background-color: darkcyan;
    color: white;
}