title: How do I create 2 column layout with topnav and sticky footer with full height background-color
body: <p>Is it possible to create a simple 2 column web page responsive layout with full height background color and a sticky footer that sticks to the bottom of the browser unless the page content height exceeds the window height space?</p>
  
  <p>The desired div layout would be</p>
  
  <pre><code>&lt;div class=“header”&gt;Logo&lt;/div&gt;
  &lt;div class=“topnav”&gt;Nav links&lt;/div&gt;
      &lt;div class=“side content”&gt;Links&lt;/div&gt;
      &lt;div class=“main content”&gt;Some content&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=“footer”&gt;footer&lt;/div&gt;
  </code></pre>
  
  <p>I’ve tried sticky footer solution that works until I try to make the divs between the header and footer 100% height as they may have background-color and want it to extend to the footer start. But when I set the height=“100%” on the html, body and topnav (assuming header and footer are fixed heights) it pushes the topnav contents down below the sticky footer. BTW, the sticky footer uses css position:absolute and bottom:0.</p>