title: Keep left menu fixed with 100% full page height?
body: <p>I am trying to code a website where you have a Leftmenu bar, and the content on the right. Both the content and left menu bar should be scrollable separately.</p>
  
  <p>The problems I am having is that:</p>
  
  <ul>
  <li>The left menu bar is not covering 100% of page while the content scrolls</li>
  <li>The "footer" (subscribe/contact) doesnt stay on bottom when the page is vertically resized</li>
  </ul>
  
  <p>Would somebody be able to provide some input?</p>
  
  <p><strong>CODE HERE: <a href="http://codepen.io/anon/pen/rVXErO" rel="nofollow">http://codepen.io/anon/pen/rVXErO</a></strong></p>
  
  <p>CSS: </p>
  
  <pre><code>* {
                  margin:0 auto;
                  padding:0px;
              }
  
              html, body {
                  margin: 0 auto;
                  padding:0px;
                  min-height: 100%;
                  height: 100%;
              }
  
              /*Main container for body*/
              .container {
                  position: relative;
                  display: table;
                  min-height: 100%;
                  height: 100%;
                  width:100%;
              }
  
              .container &gt; div {
                  display: inline-block;
                  vertical-align: top;
              }
  
              .leftmenu {
                  position: relative;
                  width: 22%;
                  min-height: 100%;
                  margin-left: 0px;
                  height; 100%;
                  z-index: 99;
                  background-color:#28aadc;
                  box-shadow: 2px 0px 30px 4px;
                  overflow: auto;
              }
  
              .leftmenu &gt; h1 {
                  font-size: 45px;
                  width: auto;
                  color:white;
                  text-align: center;
                  font-family: 'arkhip';
                  padding-top: 10px;
              }
  
              .leftmenu .social {
                  position: relative;
                  color:#00648c;
                  text-align: center;
                  margin-top: 10px;
                  margin-bottom: 35px;
              }
  
              .leftmenu .social .fa {
                  font-size: 20px;
                  margin-left: 3px;
                  margin-right: 3px;
              }
  
              .leftmenu .social .fa:hover {
                  color:white;
                  cursor: pointer;
              }
  
              .leftmenu .nav {
                  position: relative;
                  height: auto;
                  padding-bottom: 12px;
              }
  
              .leftmenu .nav ul {
                  height: auto;
                  width: auto;
                  text-align: center;
              }
  
              .leftmenu .nav ul li {
                  width: 100%;
              }
  
              .leftmenu .nav ul li &gt; a {
                  margin-top: 5px;
                  width:80%;
                  display: block;
                  text-decoration: none;
                  color:#00648c;
                  font-family: 'arkhip';
                  font-size: 15px;
                  padding:5px;
              }
  
              .leftmenu .nav ul li &gt; a:hover {
                  color:white;
              }
  
              .leftmenu .footer {
                  position: absolute;
                  bottom:0px;
                  border:1px solid red;
                  width:100%;
                  background-color:blue;
                  padding-top: 12px;
              }
  
              .mainContent {
                  display: table;
                  position: relative;
                  height: 100%;
                  min-height: 100%;
                  width:78%;
                  margin:0 auto;
                  margin-right: 0px;
              }
  
              #home {
                  height: 100%;
                  min-height: 100%;
                  background-image: url(images/newyorkblurred.jpg);
                  background-size: cover;
              }       
  
              #home &gt; h1, #home &gt; p {
                  position: relative;
                  text-align: center;
                  top:50%;
                  -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
                  color:white;
                  font-family: 'arkhip;'
              }
  
              #home &gt; h1 {
                  font-size: 100px;
                  font-family: 'arkhip';
                  margin:0 auto;
              }
  
              #home &gt; p {
                  text-align: center;
                  margin:0 auto;
                  font-family: 'arkhip';
                  margin-top: -60px;
                  font-size: 18px;
              }
  
              #gallery, #about, #contact, #videos {
                  height: 100%;
                  min-height: 100%;
              }
  
              #videos {
                  background-color:black;
              }
  
              #about {
                 background-color:aqua;
              }
  
              #gallery {
                  background-color:red;
              }
  
              #contact {
                  background-color:gray;
              }
  
              @media screen and (max-width:767px) {
                  .leftmenu &gt; h1 {
                      font-size: 80%;
                  }
              }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="leftmenu"&gt;
                  &lt;h1&gt;Sidebar&lt;/h1&gt;
  
                  &lt;div class="social"&gt;
                      &lt;span class="fa fa-facebook"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-instagram"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-twitter"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-youtube"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-vine"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-tumblr"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-google-plus"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-linkedin"&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div class="nav"&gt;
                      &lt;ul class="navigation"&gt;
                          &lt;li&gt;
                              &lt;a href="#home"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#videos"&gt;Videos&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#gallery"&gt;Gallery&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#about"&gt;About&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#contact"&gt;Contact&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
                  &lt;div class="footer"&gt;
                      &lt;p&gt;Subscribe&lt;/p&gt;
                      &lt;p&gt;Contact&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="mainContent"&gt;
                  &lt;div id="home"&gt;
                      &lt;h1&gt;It's Magic&lt;/h1&gt;
                      &lt;p&gt;You just need to believe!&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="videos"&gt;
                      &lt;h1&gt;Videos&lt;/h1&gt;
                  &lt;/div&gt;
  
                  &lt;div id="gallery"&gt;
                      &lt;h1&gt;Gallery&lt;/h1&gt;
                  &lt;/div&gt;
  
                  &lt;div id="about"&gt;
                      &lt;h1&gt;About&lt;/h1&gt;
                  &lt;/div&gt;
  
                  &lt;div id="contact"&gt;
                      &lt;h1&gt;Contact&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>