title: Position a sticky footer next to a fixed left column under a sticky header
body: <p>Happy New Year everyone! I need help from a more experienced html/css architect. I'm having trouble creating a CSS and Html only(No Javascript) custom layout. That includes:</p>
  
  <blockquote>
    <p><strong>1.</strong> Top sticky header, fully stretched 100% width of the page</p>
    
    <p><strong>2.</strong> Left menu that sits under the header and is fully stretched to the bottom of the page in height, and dissapears if you resize the
    width of the page (media min-width of 845px)</p>
    
    <p><strong>3.</strong> a sticky footer that is position next to the left menu but stretched the full remaining width of the page.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/YexVG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YexVG.jpg" alt="enter image description here"></a></p>
  
  <p>This is my layout so far: <a href="http://jsfiddle.net/fksxb09y/" rel="nofollow noreferrer">http://jsfiddle.net/fksxb09y/</a></p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
  
    &lt;div class="header"&gt;STICKY HEADER&lt;/div&gt;
      &lt;!-- Sidebar --&gt;
          &lt;div id="sidebar-wrapper"&gt;
              &lt;ul class="sidebar-nav"&gt;
                  &lt;li class="sidebar-brand"&gt;
                      &lt;a href="#"&gt;
                          Start Bootstrap
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Dashboard&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Shortcuts&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Overview&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Events&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;About&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Services&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /#sidebar-wrapper --&gt;
    &lt;div class="content"&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;
          &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
      &lt;br /&gt;CONTENT
  
    &lt;/div&gt;
    &lt;div class="push"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;STICKY FOOTER&lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>&gt; html, body, .wrap {   height: 100%; } .wrap { box-sizing:border-box; }
  &gt; 
  &gt; form {height:100%} .wrap {   min-height: 100%;   height: auto
  &gt; !important;   height: 100%;   margin-bottom: -60px;   /* for sticky
  &gt; footer to not go below page */   /* for sticky header to not overlap
  &gt; content */ } .push, .footer {   height: 60px; } .footer {  
  &gt; background-color: green;     height: 60px;   width: 100%;   position:
  &gt; fixed;   bottom: 0; } .content {   padding-top: 60px;  height:100% 
  &gt; !important;    background-color: yellow; } .header {  
  &gt; background-color: blue;   height: 60px;    width: 100%;   position:
  &gt; fixed;   top: 0; }
  &gt; 
  &gt; 
  &gt; #sidebar-wrapper {
  &gt;     z-index: 1000;
  &gt;     position: fixed;
  &gt;     left: 250px;
  &gt;     width: 0;
  &gt;     height: 100%;
  &gt;     margin-left: -250px;
  &gt;     overflow-y: auto;
  &gt;     background: #000;
  &gt;     -webkit-transition: all 0.5s ease;
  &gt;     -moz-transition: all 0.5s ease;
  &gt;     -o-transition: all 0.5s ease;
  &gt;     transition: all 0.5s ease; }
  &gt; 
  &gt; #wrapper.toggled #sidebar-wrapper {
  &gt;     width: 250px; }
  &gt; 
  &gt; #page-content-wrapper {
  &gt;     width: 100%;
  &gt;     position: absolute;
  &gt;     padding: 15px; }
  &gt; 
  &gt; #wrapper.toggled #page-content-wrapper {
  &gt;     position: absolute;
  &gt;     margin-right: -250px; }
  &gt; 
  &gt; /* Sidebar Styles */
  &gt; 
  &gt; .sidebar-nav {
  &gt;     position: absolute;
  &gt;     top: 0;
  &gt;     width: 250px;
  &gt;     margin: 0;
  &gt;     padding: 0;
  &gt;     list-style: none; }
  &gt; 
  &gt; .sidebar-nav li {
  &gt;     text-indent: 20px;
  &gt;     line-height: 40px; }
  &gt; 
  &gt; .sidebar-nav li a {
  &gt;     display: block;
  &gt;     text-decoration: none;
  &gt;     color: #999999; }
  &gt; 
  &gt; .sidebar-nav li a:hover {
  &gt;     text-decoration: none;
  &gt;     color: #fff;
  &gt;     background: rgba(255,255,255,0.2); }
  &gt; 
  &gt; .sidebar-nav li a:active, .sidebar-nav li a:focus {
  &gt;     text-decoration: none; }
  &gt; 
  &gt; .sidebar-nav &gt; .sidebar-brand {
  &gt;     height: 65px;
  &gt;     font-size: 18px;
  &gt;     line-height: 60px; }
  &gt; 
  &gt; .sidebar-nav &gt; .sidebar-brand a {
  &gt;     color: #999999; }
  &gt; 
  &gt; .sidebar-nav &gt; .sidebar-brand a:hover {
  &gt;     color: #fff;
  &gt;     background: none; }
  &gt; 
  &gt; @media(min-width:768px) {
  &gt;     #wrapper {
  &gt;         padding-left: 250px;
  &gt;     }
  &gt; 
  &gt;     #wrapper.toggled {
  &gt;         padding-left: 0;
  &gt;     }
  &gt; 
  &gt;     #sidebar-wrapper {
  &gt;         width: 250px;
  &gt;     }
  &gt; 
  &gt;     #wrapper.toggled #sidebar-wrapper {
  &gt;         width: 0;
  &gt;     }
  &gt; 
  &gt;     #page-content-wrapper {
  &gt;         padding: 20px;
  &gt;         position: relative;
  &gt;     }
  &gt; 
  &gt;     #wrapper.toggled #page-content-wrapper {
  &gt;         position: relative;
  &gt;         margin-right: 0;
  &gt;     } }
  </code></pre>
  
  <p>As you see I'm having problems filling up the entire height of the content section without the white space at the bottom when I stretch it. </p>
  
  <p>The left column layout covers the header and footer instead of the header being placed on top and the footer to the side of the left column. </p>
  
  <p><strong>I'm hopelessly stuck right now, and need help in figuring out this layout. Any help or tips in the right direction will be greatly appreciated. Thank You!</strong>   </p>
  
  <p><strong>UPDATE 1:</strong> Almost solved the problem thanks to @DaMaGeX <a href="http://jsfiddle.net/fksxb09y/9/" rel="nofollow noreferrer">http://jsfiddle.net/fksxb09y/9/</a>  </p>
  
  <p>Now I just need to figure out: </p>
  
  <blockquote>
    <p><strong>1.</strong> Why the body leaves a white space at the
    bottom when resizing. </p>
    
    <p><strong>2.</strong> When reisizing the height of the browser
    window the sticky footer overlaps the header, and the min-height of
    the content section dissapears. There should be a big enough space for the content when resizing.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/KRlbV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KRlbV.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ra9mn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ra9mn.jpg" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE 2:</strong> Now there's another problem that I didn't notice the bottom arrow on the left menu dissapears on resize, and the content on the bottom also dissapears. <a href="http://jsfiddle.net/fksxb09y/9/" rel="nofollow noreferrer">http://jsfiddle.net/fksxb09y/9/</a>  </p>
  
  <p><a href="https://i.stack.imgur.com/dx15w.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dx15w.jpg" alt="enter image description here"></a></p>