title: How to get a div to the bottom without content while still having a responsive design?
body: <p>I have a left side nav with a main content area to the right of it.
  Regardless of if the left side nav or the content area has any content i would like it to stretch down to the bottom of the container. Basically this is what im trying to do (<a href="https://stackoverflow.com/questions/24979374/stretching-divs-to-bottom-with-a-responsive-grid">Stretching divs to bottom with a responsive grid</a>). The answer in this thread does not work for me since the content is not expanding the div properly when reaching the bottom of the container.</p>
  
  <p>What i have tried is to use height on html,body and parent of the container including the container and while that gives the correct height the height isnt automatically re-calculated when the content reaches the bottom of the container (the div isnt moving further down and the content is overflowing). In this situation i have used the overflow property which works but i dont want a scrollbar in a div, i would like it to expand naturally further down the page.</p>
  
  <p>I've created a very simple html and css example to show the problem:</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    html,
      body {
        height: 100%;
      }
  
      .container {
        border: 2px solid red;
        width: 75%;
        height: 75%;
        margin: 0px auto;
      }
      .content {
        border: 2px solid yellow;
        display: inline-block;
        height: 100%;
        overflow: auto;
        width: 50%;
      }
      .right-menu {
        border: 2px solid green;
        display: inline-block;
        height: 75%;
        vertical-align: top;
        width: 15%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;testing&lt;/title&gt;
    &lt;link rel="stylesheet" href="test.css" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="right-menu"&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;this is a test&lt;/p&gt;
        &lt;p&gt;this is a test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;this is a test&lt;/p&gt;
        &lt;p&gt;this is a test&lt;/p&gt;
        &lt;p&gt;this is a test&lt;/p&gt;
        &lt;p&gt;this is another test&lt;/p&gt;
        &lt;p&gt;this is a test&lt;/p&gt;
        &lt;p&gt;this is a test&lt;/p&gt;
        &lt;p&gt;this is another test&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I currently have the overflow property specified above but i dont want the scrollbars and i do not want to hide any content as i would like the content to be visible for users. Basically a news feed going down the page which should automatically expand the div further down the page.</p>
  
  <p>Does anyone have any good suggestions to this ? I see there are several threads and results for this but none seems to offer a good solutions or have a different problem than i have.</p>