JSFiddle - React, Tailwind, and code Playground

by michaelburtonray

HTML

<div class="top">
    <div data-offcanvas class="off-canvas-wrap">
  <div class="inner-wrap">
      <%= render 'layouts/navigation' %>
        <section class="main-section">
       <%= render 'layouts/messages' %>
       <div class="row">
          <div class="large-12 columns">
            <%= yield %>
          </div>
        </div>
    </section>
</div>
          </div>
      </div>
      
      <div class="footer-bottom">
       <div class="row">
       <div class="small-12 columns small-centered text-center">

          <ul class="footer-links">
            <li><a href="#">About</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Sitemap</a></li>
         </ul>
         <p class="copyright">© 2011–2014 Acme, Inc. All rights reserved.</p>
      </div>
    </div>

CSS

html,
body {
    height: 100%;
}

.top {
    background: red;
    min-height: calc(100% - 156px);
}

.footer-bottom {
    background: green;
    overflow: hidden;
    height: 156px;
}