title: Vertical menu from menu to the footer always
body: <p>I need to stretch my vertical menu to the bottom to the footer all the time, even when there is no content. I posted this before, and the solution was working, but after some changes i was not able to fix it again. I m kind of lost, because this should be so easy and I'm stagnating with such an easy stuff.</p>
  
  <p>Please can you also explain what does the solution do, so I will understand why it fixed the problem?</p>
  
  <p>Here is how it looks now:</p>
  
  <p><img src="https://i.stack.imgur.com/saEDf.png" alt="enter image description here"></p>
  
  <p>Here is the code:</p>
  
  <pre><code>@media only screen and(min-width: 1368px) {
      .site-container {
          height: 633px;
      }
  }
  
  html, body {
      height: 100%;
  }
  
  .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -50px;
  }
  
  .page-wrap:after {
      content: "";
      display: block;
  }
  
  .footer, .page-wrap:after {
      height: 50px;
  }
  
  .bordered {
      border: 1px solid black
  }
  
  .footer {
      position: relative;
      width: 100%;
      padding-left: inherit;
      z-index: 10;
      background-color: red;
      height: 50px;
      display: block;
  }
  
  .content {
      position: relative;
      float: right;
      height: 100%;
      display: block;
      padding-top: 10px;
  }
  
  .header {
      margin: inherit;
      position: relative;
      width: 100% ;
  }
  
  .menu-vertical {
      position: relative;
      background-color: #aaa;
      float: left;
      height: 100%;
  }
  
  li {
      list-style-type: none;
      padding: 0;
  }
  
  ul {
      padding: 0;
  }
  
  menu {
      padding: 0;
      padding-right: 50px;
  }
  
  .site-container {
      position: relative;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
  }
  
  .site-container &gt; .row:first-of-type {
      height:100%;
  }
  
  .menu-horizontal ul {
      padding: 0;
  }
  
  .menu-horizontal li {
      list-style-type: none;
      padding: 0;
      padding-left: 50px;
      margin: 0;
      display: inline;
  }
  
  .menu-horizontal {
      margin: inherit;
      position: relative;
      padding-top: 5px;
  }
  
  .page {
      width: 90%;
      padding-left: 10%;
      min-height: 100%;
  }
  
  .page-wrap .row {
      padding: 0;
      margin: 0;
      min-height: 100%;
  }
  </code></pre>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;template&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="page-wrap"&gt;
          &lt;div class="row"&gt;
              &lt;header class="col-sm-12 col-md-12 col-lg-12 bordered header"&gt; &lt;!-- Header --&gt;
                  Header
              &lt;/header&gt; &lt;!-- End of header --&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12 col-md-12 col-lg-12 bordered menu-horizontal"&gt; &lt;!-- Horizontal menu --&gt;
                  &lt;menu class="menu-horizontal"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;1nav item 1&lt;/li&gt;
                          &lt;li&gt;1nav item 2&lt;/li&gt;
                          &lt;li&gt;1nav item 3&lt;/li&gt;
                          &lt;li&gt;1nav item 4&lt;/li&gt;
                          &lt;li&gt;1nav item 5&lt;/li&gt;
                          &lt;li&gt;1nav item 6&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/menu&gt;
              &lt;/div&gt;&lt;!-- End of horizontal menu --&gt;
          &lt;/div&gt;
          &lt;div class="site-container"&gt;
              &lt;div class="col-sm-2 col-md-2 col-lg-2 bordered menu-vertical"&gt; &lt;!-- Vertical menu --&gt;
                  &lt;menu role="menu"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;2nav item 1&lt;/li&gt;
                          &lt;li&gt;2nav item 2&lt;/li&gt;
                          &lt;li&gt;2nav item 3&lt;/li&gt;
                          &lt;li&gt;2nav item 4&lt;/li&gt;
                          &lt;li&gt;2nav item 5&lt;/li&gt;
                          &lt;li&gt;2nav item 6&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/menu&gt;
              &lt;/div&gt; &lt;!-- End of vertical menu --&gt;
              &lt;div class="col-sm-10 col-md-10 col-lg-10 bordered content"&gt; &lt;!-- Content --&gt;
              &lt;/div&gt; &lt;!-- End of content --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer class="col-sm-12 col-md-12 col-lg-12 bordered footer"&gt; &lt;!-- Footer --&gt;
          Footer
      &lt;/footer&gt; &lt;!-- End of footer --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>